CSS two column problem

smiths11 · 06-30-2009, 04:21 AM

Hello,
I'm having problems with a two column layout. The right-hand side looks fine, but the main content area ends up being below it and to the left. Here is what I've done, can anyone tell me what the problem is...I'm pretty sure it's my calculations, but I've tried so many different combinations. Thanks for your help.

Code:

#body .content {
	border: 0px;
    float:left;
    width:550px;
    margin:10px 10px 10px 10px;
    
    min-height:500px;
    _height:500px
} 

#body .rightmenu {
    border-left: 1px dotted;
    
    width:180px;
    margin:10px 10px 10px 579px;
    padding-left:10px;
    height:350px;
	
}

Bigmous · 09-11-2009, 04:02 AM

Please post html code so I can see what exactlty your talking about.

sbl · 10-06-2009, 05:04 AM

Hello,
You can do as follows:

HTML CODE:

Code:

<div class="main">
<div class="content">

</div>
<div class="rightmenu ">
<div class="padding">

</div>
</div>
</div>

CSS CODE

Code:

.main{
width:900px;
}

.main .content {
    float:left;
    width:600px;
    margin:10px 10px 10px 10px;
    min-height:500px;
    _height:500px
} 

.main .rightmenu {
    border-left: 1px dotted;
    width:180px;
    margin:10px 10px 10px 259px;
    height:350px;
	
}
.main .rightmenu .padding{
padding-left:10px;
}

width and padding properties don't work appropriately in a single div. if u need a div width 500px and padding 10px, then u must have to use two different div. if u want to use a single div then u have to fix width in 480px and as well as padding in 10px.

Thanks.

Jamclellan36 · 12-15-2009, 01:16 AM

Without seeing your code I can't say for sure, but do you also have a padding on those columns? If so, that's what's wrong. And IE isn't displaying it correctly, Firefox is.

Padding gets ADDED to width, so if your widths of the two columns add up to 100%, then you add padding, you're increasing the the width of the column, and there isn't enough room in the container for the two to be next to each other, unless you have overflow:hidden, but that's not what you want.

The best rule of thumb when creating any sort of layout so that it looks exactly the same in every browser is don't put a width on the same element as padding and margin. Here's an example:

<div style="width:500px;">

<div style="padding:25px;">



</div>

</div>

If you write that, your element will be 500px wide, if you look at the below example, it will be 550px wide:

markei · 01-16-2010, 11:34 AM

Hello!

I am answering your problem with several solutions, so if one doesn't help you perhaps another will. We don't have a lot to go on with the snippet of code you provided.

I have found that it helps to sort these things out by adding a background color to the divs to see what they are actually doing.

Add background:#990000; to one and background:#000099; to the other.

If you are simply talking about the left being down slightly, it is because of the margin you set on the .content. Change the first value (top) to 0px instead of 10px and it will be correct.

If your code is exactly as shown, you may have a coding error. Do not put a "#" in front of "body" unless the "content" CLASS is contained in a "body" ID.

A better way in CSS would be to use a ID for both content and rightmenu since they are only used once on your page. The rule for using an ID is that they are used once. Classes can be used more than once on a page.

Of course all this depends on what else you have on the page and if there is a container and what the container's dimension and CSS attributes are. That's why we need more code to figure it out and everyone can only guess at this point.

I have also found that adding "position:relative;" as a rule to positioned divs will help solve some head-scratching issues.

My corrections follow with no containing div and it works fine.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
<style type="text/css">
#content {
    border: 0px;
    float:left;
    width:550px;
    margin:0px 10px 10px 10px;
    background:#009999;
    min-height:500px;
    _height:500px
    position:relative;} 
#rightmenu {
    border-left: 1px dotted;
    background:#999900;
    width:180px;
    margin:10px 10px 10px 579px;
    padding-left:10px;
    height:350px;
    position:relative;
}
</style>
</head>

<body>
<div id="content">Hi</div>
<div id="rightmenu">there</div>
</body>

</html>

Hope it helps!

***If none of this helps, you will have to post the CSS and HTML code you are using for someone to help you, Thanks!

06-30-2009, 04:21 AM	#1
smiths11 New Member Join Date: Jun 2009 Webmaster Discussions: 1 Rep Power: 8	CSS two column problem Hello, I'm having problems with a two column layout. The right-hand side looks fine, but the main content area ends up being below it and to the left. Here is what I've done, can anyone tell me what the problem is...I'm pretty sure it's my calculations, but I've tried so many different combinations. Thanks for your help. Code: #body .content { border: 0px; float:left; width:550px; margin:10px 10px 10px 10px; min-height:500px; _height:500px } #body .rightmenu { border-left: 1px dotted; width:180px; margin:10px 10px 10px 579px; padding-left:10px; height:350px; }

09-11-2009, 04:02 AM	#2
Bigmous Junior Member Join Date: Dec 2008 Location: Sydney, Australia Webmaster Discussions: 27 Rep Power: 11	Re: CSS two column problem Please post html code so I can see what exactlty your talking about.

10-06-2009, 05:04 AM	#3
sbl New Member Join Date: Oct 2009 Location: Dhaka, Bangladesh Webmaster Discussions: 2 Rep Power: 6	Re: CSS two column problem Hello, You can do as follows: HTML CODE: Code: <div class="main"> <div class="content"> </div> <div class="rightmenu "> <div class="padding"> </div> </div> </div> CSS CODE Code: .main{ width:900px; } .main .content { float:left; width:600px; margin:10px 10px 10px 10px; min-height:500px; _height:500px } .main .rightmenu { border-left: 1px dotted; width:180px; margin:10px 10px 10px 259px; height:350px; } .main .rightmenu .padding{ padding-left:10px; } width and padding properties don't work appropriately in a single div. if u need a div width 500px and padding 10px, then u must have to use two different div. if u want to use a single div then u have to fix width in 480px and as well as padding in 10px. Thanks.

12-15-2009, 01:16 AM	#4
Jamclellan36 New Member Join Date: Nov 2009 Location: USA Webmaster Discussions: 2 Rep Power: 5	CSS: Two column layout problem? Without seeing your code I can't say for sure, but do you also have a padding on those columns? If so, that's what's wrong. And IE isn't displaying it correctly, Firefox is. Padding gets ADDED to width, so if your widths of the two columns add up to 100%, then you add padding, you're increasing the the width of the column, and there isn't enough room in the container for the two to be next to each other, unless you have overflow:hidden, but that's not what you want. The best rule of thumb when creating any sort of layout so that it looks exactly the same in every browser is don't put a width on the same element as padding and margin. Here's an example: <div style="width:500px;"> <div style="padding:25px;"> <!-- THIS IS THE RIGHT WAY TO DO IT --> </div> </div> If you write that, your element will be 500px wide, if you look at the below example, it will be 550px wide:

01-16-2010, 11:34 AM	#5
markei New Member Join Date: Mar 2009 Location: Westminster, MD Webmaster Discussions: 19 Rep Power: 10	Re: CSS two column problem Hello! I am answering your problem with several solutions, so if one doesn't help you perhaps another will. We don't have a lot to go on with the snippet of code you provided. I have found that it helps to sort these things out by adding a background color to the divs to see what they are actually doing. Add background:#990000; to one and background:#000099; to the other. If you are simply talking about the left being down slightly, it is because of the margin you set on the .content. Change the first value (top) to 0px instead of 10px and it will be correct. If your code is exactly as shown, you may have a coding error. Do not put a "#" in front of "body" unless the "content" CLASS is contained in a "body" ID. A better way in CSS would be to use a ID for both content and rightmenu since they are only used once on your page. The rule for using an ID is that they are used once. Classes can be used more than once on a page. Of course all this depends on what else you have on the page and if there is a container and what the container's dimension and CSS attributes are. That's why we need more code to figure it out and everyone can only guess at this point. I have also found that adding "position:relative;" as a rule to positioned divs will help solve some head-scratching issues. My corrections follow with no containing div and it works fine. Code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title></title> <style type="text/css"> #content { border: 0px; float:left; width:550px; margin:0px 10px 10px 10px; background:#009999; min-height:500px; _height:500px position:relative;} #rightmenu { border-left: 1px dotted; background:#999900; width:180px; margin:10px 10px 10px 579px; padding-left:10px; height:350px; position:relative; } </style> </head> <body> <div id="content">Hi</div> <div id="rightmenu">there</div> </body> </html> Hope it helps! ***If none of this helps, you will have to post the CSS and HTML code you are using for someone to help you, Thanks!

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread:

Similar Webmaster Discussions
Thread	Webmaster Discussion Starter	Forum	Replies	Last Post
Can i specify field value without using column-name?	ramki067	Databases	0	05-26-2008 03:52 AM
CSS Layout - 3 Column Plus	chetan1	HTML Forum	3	04-28-2008 11:42 PM
Need help with Alignment problem for two column layout	designkitt	CSS Forum	5	09-04-2007 02:00 AM
right column shifts	xXPrincessXx	CSS Forum	3	07-24-2004 08:36 AM
extensible left column	Damian	CSS Forum	2	03-29-2003 07:00 PM