Front page > Programming > How to Achieve Fluid Width and Even Spacing for Four DIVs in a Container?
How to Achieve Fluid Width and Even Spacing for Four DIVs in a Container?
Posted on 2025-02-06
Browse:223
Fluid Width with Equally Spaced DIVs
Question:
You have a fluid width container DIV with four DIVs, each with fixed dimensions. How can you float box 1 to the left, box 4 to the right, and space boxes 2 and 3 evenly between them, maintaining fluid spacing as the browser window size changes?
**Answer:
Refer to the provided JSFiddle for a complete example: http://jsfiddle.net/thirtydot/EDp8R/
Explanation:
This solution utilizes several techniques to achieve the desired layout:
- text-align: justify;: This aligns the DIVs horizontally, distributing space between them.
- .stretch: A span with width set to 100%. It expands to fill the remaining width of the container.
- display:inline-block; *display:inline; zoom:1;: Ensures inline-block behavior for IE6/7.
- font-size: 0; line-height: 0;: Prevents vertical space caused by inline-block in IE6.
By combining these techniques, the DIVs are positioned fluidly, evenly spaced and floating as desired, regardless of the container width.
Latest tutorial
More>
-
How to Implement Custom Exception Handling with Python\'s Logging Module?Custom Error Handling with Python's Logging ModuleEnsuring that uncaught exceptions are properly handled and logged can be crucial for troubleshoo...Programming Posted on 2025-02-06 -
Does `exec()` Update Local Variables in Python 3, and If Not, How Can It Be Made To?exec's Impact on Local Variables: A Dive InThe exec function, a Python staple for dynamic code execution, poses an intriguing query: can it update...Programming Posted on 2025-02-06
-
How Do I Correctly Set the Value of a jQuery Drop-Down List?Change the Value of jQuery Drop-Down List from Known ValuesIn jQuery, setting the value of a drop-down list is straightforward. However, issues may ar...Programming Posted on 2025-02-06
-
How Can I Efficiently Count Element Occurrences in a Java List?Counting Element Occurrences in a ListWithin the realm of Java programming, the task of enumerating element occurrences within a list comes to the for...Programming Posted on 2025-02-06
-
A interface Writein go, interfaces are fundamental to promoting polymorphism and abstraction. They act as contracts that specify a set of methods that a type shoul...Programming Posted on 2025-02-06
-
How to Dynamically Execute a Function Call from a String in JavaScript?Converting a String to a JavaScript Function CallIn JavaScript, it is possible to encounter a scenario where a string represents a function call, and ...Programming Posted on 2025-02-06
-
How Can I Select an HTML Element with Multiple Classes Using CSS Selectors?Targeting Elements with Multiple Classes Using CSS SelectorsWhen working with HTML and CSS, you may encounter situations where you need to select elem...Programming Posted on 2025-02-06
-
Virtual/Override vs. New in C#: When Should I Use Which Keyword for Method Overriding?virtual/override and new keywords in C#: When to use which keyword to rewrite method? When defining methods in base classes, programmers often face...Programming Posted on 2025-02-06
-
How to Sort Data by String Length in MySQL Using CHAR_LENGTH()?Selecting Data by String Length in MySQLTo sort data based on string length in MySQL, instead of using string_length(column), consider using the built...Programming Posted on 2025-02-06
-
Why am I getting "SQLException: No suitable driver found for jdbc:derby://localhost:1527" when connecting to my Derby database?JDBC Connection Error: No Suitable Driver for Derby ConnectionWhen attempting to connect to a Derby database using JDBC, you may encounter the error: ...Programming Posted on 2025-02-06
-
How to Bind a WPF ComboBox to a Custom List?Bind ComboBox to custom list in WPF WPF's ComboBox control provides flexible data binding options, including the ability to display and select v...Programming Posted on 2025-02-06
-
Why Defer Database Rollback in Go?Deferring Database Rollback: Understanding the ConceptIn Go database interactions, the use of defer for transaction rollback can raise questions. Cons...Programming Posted on 2025-02-06
-
How can I install MySQL on Ubuntu without a password prompt?Non-Interactive Installation of MySQL on UbuntuThe standard method of installing MySQL server on Ubuntu using sudo apt-get install mysql prompts for a...Programming Posted on 2025-02-06
-
How Can I UNION Database Tables with Different Numbers of Columns?Combined tables with different columns] Can encounter challenges when trying to merge database tables with different columns. A straightforward way i...Programming Posted on 2025-02-06
-
Why Does C++ Use the "using" Keyword?Exploration of the Logic Behind the "using" Keyword in C In the realm of C programming, the "using" keyword serves various purp...Programming Posted on 2025-02-06
Study Chinese
- 1 How do you say "walk" in Chinese? 走路 Chinese pronunciation, 走路 Chinese learning
- 2 How do you say "take a plane" in Chinese? 坐飞机 Chinese pronunciation, 坐飞机 Chinese learning
- 3 How do you say "take a train" in Chinese? 坐火车 Chinese pronunciation, 坐火车 Chinese learning
- 4 How do you say "take a bus" in Chinese? 坐车 Chinese pronunciation, 坐车 Chinese learning
- 5 How to say drive in Chinese? 开车 Chinese pronunciation, 开车 Chinese learning
- 6 How do you say swimming in Chinese? 游泳 Chinese pronunciation, 游泳 Chinese learning
- 7 How do you say ride a bicycle in Chinese? 骑自行车 Chinese pronunciation, 骑自行车 Chinese learning
- 8 How do you say hello in Chinese? 你好Chinese pronunciation, 你好Chinese learning
- 9 How do you say thank you in Chinese? 谢谢Chinese pronunciation, 谢谢Chinese learning
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
