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!

**fucuco** · 11-23-2014, 04:19 AM

why do you have _height, it won't work!

Thread: CSS two column problem

Thread Tools

Related

Can i specify field value without using column-name? Forum: Databases

CSS Layout - 3 Column Plus Forum: HTML Forum

Need help with Alignment problem for two column layout Forum: CSS Forum

right column shifts Forum: CSS Forum

hide column of table Forum: CSS Forum

CSS two column problem

Re: CSS two column problem

Re: CSS two column problem

CSS: Two column layout problem?

Re: CSS two column problem

Re: CSS two column problem

Tags for this Thread

Cloudjiffy- PaaS for Developers