Thread: CSS two column problem
Results 1 to 6 of 6
Related
-
Can i specify field value without using column-name? Forum: Databases
Replies: 0 -
CSS Layout - 3 Column Plus Forum: HTML Forum
Replies: 3 -
Need help with Alignment problem for two column layout Forum: CSS Forum
Replies: 5 -
right column shifts Forum: CSS Forum
Replies: 3 -
hide column of table Forum: CSS Forum
Replies: 2
-
06-30-2009, 04:21 AM #1
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
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
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>
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; }
Thanks.
-
12-15-2009, 01:16 AM #4
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
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>
***If none of this helps, you will have to post the CSS and HTML code you are using for someone to help you, Thanks!
-
11-23-2014, 04:19 AM #6
Re: CSS two column problem
why do you have _height, it won't work!
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum