Log in

View Full Version : problems with width of 2-col layout


oldandintheway
10-08-2011, 03:10 AM
Hi,

This is my first post here. I've looked at a lot of CSS layout, including these (http://www.dynamicdrive.com/style/layouts/category/C13/), but I find it difficult to single out the magic code that makes them work and not mine. They all seem unnecessarily complex with negative margins.

I am trying to understand the problem illustrated by the following code/page. It works and breaks exactly the same on all 4 browsers (IE9, Firefox, Chrome & Safari - all on Windows Vista).

As it's coded below, it works just fine. The green & cyan columns are side-by-side. As soon as I try to add a border around either column (for example - just remove the comment from the "border" attribute on either column), the cyan column drops down to the next row. I understand why that occurs - the border is outside the box width, so when I add the border, the width is now "1px + 20% + 1px" and therefore it can no longer fit in the available 20%.

Yes, I can change the width from 80% to 79% or from 20% to 19% to provide room for the borders, but I want the columns packed tight, with no spacing between them. I can also have widths of 500px and 100px, and when I add a 1px border to the right column, I just change the width from 100px to 98px to make room for the 1px border around it. But I don't like fixed-width blocks - I want %.

So is it possible to specify the widths in %, and allow for changes in styling (add/remove/edit borders), without having to change the widths and still have tightly-packed blocks?

Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<html>
<head>
<style type="text/css">
html { margin: 0;}

#container { background-color: yellow;
width: 100%;
margin: 0;
padding: 0;
}

#main { float: left;
width: 80%;
background-color: green;
margin: 0;
padding: 0;
/*border: 1px solid magenta;*/
}

#rightcol { width: 20%;
background-color: cyan;
float: right;
margin: 0;
padding: 0;
/*border: 1px solid magenta;*/
}
</style>
</head>
<body>

<div id="container">
<div id="main"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
<div id="rightcol"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>

</body>
</html>
coothead
10-08-2011, 09:56 AM
Hi there oldandintheway,

and a warm welcome to these forums. ;)

Adding borders will, obviously, take the width over 100%.

So try it like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>80% plus 20% plus 4px is greater than 100% !!!</title>

<style type="text/css">
html,body {
margin:0;
font-family:arial,sans-serif;
font-size:1em;
}
#container {
min-width:600px;
background-color:#ff0;
overflow:hidden;
}
#main {
float:left;
width:80%;
background-color:#008000;
}
#rightcol {
float:left;
width:20%;
background-color:#0ff;
}
#main-content{
padding:2.5%;
border:1px solid #f0f;
}
#rightcol-content{
padding:10%;
border:1px solid #f0f;
}
</style>

</head>
<body>

<div id="container">

<div id="main">
<div id="main-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at lectus
a metus sollicitudin consequat sit amet vitae diam. In et sem quis libero
consequat dapibus. Maecenas sit amet lobortis magna. Morbi volutpat velit
sit amet lacus congue pretium volutpat justo varius. Nullam vitae pulvinar
dui. Nunc molestie accumsan mauris, vel aliquet urna cursus sed. Morbi
vitae consequat nunc. In hac habitasse platea dictumst. Donec magna ante,
hendrerit sit amet commodo bibendum, ullamcorper et tellus. Vivamus pretium
mauris sed magna dignissim aliquet. Praesent tortor risus, luctus et viverra
eu, feugiat sit amet justo. Mauris et leo id ante semper venenatis.
</p>
</div>
</div><!-- end #main -->

<div id="rightcol">
<div id="rightcol-content">
<p>
Cras ac arcu eget massa iaculis vestibulum. Quisque orci lorem, ultrices eu
elementum vel, dictum eget diam. In sed sapien eget nisl fringilla rhoncus.
Suspendisse elit arcu, tempus ac facilisis eget, sodales at magna. Nulla
iaculis, ante in rhoncus convallis, arcu metus feugiat justo, ut scelerisque
ipsum urna ac risus. Quisque laoreet, sapien nec interdum rhoncus, nibh elit
condimentum diam, in sagittis ante ante ac felis. Sed elementum augue eget
sem pretium tempus. Proin congue vehicula molestie. Ut facilisis quam nulla,
eget posuere massa. In ipsum ligula, consectetur ac congue at, commodo iaculis
erat.
</p>
</div>
</div><!-- end #rightcol -->

</div><!-- end #container -->

</body>
</html>

coothead
oldandintheway
10-08-2011, 05:21 PM
Ah, excellent. The secret is to apply the border to another box inside the column box and use margin: 0 on that box to push the border up against the inside of the outer <div>. When I sketched the 2 nested boxes with margin, padding, border, it's obvious. Thank you!

Two followup questions:
1. I had:
(a) #main: float left
(b) #rightcol: float right

I don't exactly know why I did that, but it made sense at the time. I notice you changed it to:
(a) both columns have float left

Can you explain that? Either way seems to provide the same effect (side-by-side).

2. You also added:
min-width:600px;
overflow: hidden;

That's not needed for the layout, is it? Just personal preference? It seems to work fine either way.

I'm not actually putting plain text in either column. I'm going to use both panels as canvases for maps, etc.
coothead
10-08-2011, 08:50 PM
Hi there oldandintheway,


Actually it is just force of habit. ;)
Unless there is a specific need for float:right I use float:left.
The attribute overflow:hidden ensures that the #container div actually contains the floated elements.
Without it the yellow background would not be visible.
The drawback is that, as the window width is reduced a point will be reached where the text will overflow its container and therefore be hidden.
The min-width attribute will produce a horizontal scrollbar at the appropriate point.
Try taking it out to see what I mean. ;)

I hope that this helps.

coothead
oldandintheway
10-09-2011, 04:19 AM
Ok, got it. Yes, I see the purpose of min-width.

I had coloured the boxes with bright colours so I could see them. I don't really care about the yellow box.