Forum Moderators: not2easy
I'm trying to have a 2-column layout where the left ("Main") column is MOST of the window - no matter what size - with the right ("Sidebar") being a small fixed area for Adsense. I got the layout to work using either all Fixed (px) or Variable (%) widths, but not both at the same time, and I'm not happy with that. Then I got it working MOST of the way, but the space between the two columns is variable, and I want a fixed space of 10px.
Here's my ultimate goal:
Here's what I have so far:
CSS:
#container {
width: auto;
min-width: 730px;
background: pink;
margin: 0px;
padding: 0 10px;
}
#main {
margin: 0; padding: 10px;
background: #ffffff;
border: 1px solid #999999;
float: left;
width: 75%;
}
#sidebar {
margin: 0; padding: 3px;
background: #e3e3e3;
border: 1px solid #999999;
width: 140px;
float: right;
}
<div id="container">
<div id="main">
<h1>Main Header</h1>
<p>Lorem ipsum dolar sit amet!</p>
</div>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
</div>
I put the right column first, then the left column, and it worked using the simple code I originally tried.
So my sidebar comes before my main area in the code. I suppose I shouldn't care, but something in the back of my mind is going "Put the first column FIRST in the code, jackass!" But I'm just going to apply the "If it ain't broke, don't fix it" rule.
If anyone has a better way of solving this, feel free.
Here's my working code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Floating Tests</title>
<style>
body {
margin: 0; padding: 0;
}
#container {
border: 1px solid red;
background: pink;
margin: 0 10px;
min-width: 750px;
}
#right {
border: 1px solid blue;
background: lightblue;
float: right;
width: 140px;
margin: 0 0 0 10px;
}
#left {
border: 1px solid green;
background: lightgreen;
margin: 0 150px 0 0;
}
</style>
</head>
<body>
<div id="container">
<div id="right">
Main Area
</div>
<div id="left">
Sidebar
</div>
More content
</div>
</body>
</html>
I solved it, but not in a logical way.I put the right column first, then the left column, and it worked
On the contrary, this is perfectly logical given the way the float property works. Floating moves an element to the left or to the right, but not up and down. Wherever the floated element sits in the source code, that will be it's vertical (Y-axis) location on the page. Therefore, in order to sit adjacent to non-floating elements, a float must come first in the source code.
cEM
