March 1, 2013
Robust page layout when re-sizing
Question by Sam
I currently have two divs on my page that are about center-left, and they’re both floated left. My problem is that when I resize the page to make it smaller, the right div will sink under the left div, and I would prefer it to maintain it’s position next the the other div.
What CSS sorcery would allow me to do this? (if any)
Answer by hmb
Hi Please check the following corresponding codes, it ll helps you….
<html>
<head>
<style type="text/css">
#left {
border:1px solid red;
width:40%;
height:auto;
float:left;
}
#right {
border:1px solid blue;
width:40%;
height:auto;
float:left;
}
</style>
</head>
<body>
<div id="left">
<h1>Sample 1</h1>
<h1>Sample 1</h1>
<h1>Sample 1</h1>
<h1>Sample 1</h1>
</div>
<div id="right">
<h1>Sample 2</h1>
<h1>Sample 2</h1>
<h1>Sample 2</h1>
<h1>Sample 2</h1>
</div>
</body>
</html>
Answer by Starx
While developing a fluid layout, a common mistake is mixing, % units with px values.
Size of % is respective to available space and does not work efficiently when there are values with px or em or ...
If you are using % units to size the layouts, you have to make sure, you have to % for everything border, padding, margin.
For such layout
<div id="left">
Left
</div>
<div id="center">
Center
</div>
CSS,
#left, #center { float: left; }
#left { width: 26%; padding: 2%; }
#center { width: 66%; padding: 2%; }
