164 users online (0 members and 164 guests)  

> > > > CSS two column problem

  Results 1 to 6 of 6

Related

  1. Can i specify field value without using column-name?    Forum: Databases
    Replies: 0
  2. CSS Layout - 3 Column Plus    Forum: HTML Forum
    Replies: 3
  3. Need help with Alignment problem for two column layout    Forum: CSS Forum
    Replies: 5
  4. right column shifts    Forum: CSS Forum
    Replies: 3
  5. hide column of table    Forum: CSS Forum
    Replies: 2
  1. 06-30-2009, 04:21 AM #1
    smiths11
    smiths11 is offline
    smiths11's Avatar
    New User
    Status
    Offline
    Join Date
    Jun 2009
    Posts
    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;
	
}
    Reply With Quote Reply With Quote
  2. 09-11-2009, 04:02 AM #2
    Bigmous
    Bigmous is offline
    Bigmous's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    Re: CSS two column problem

    Please post html code so I can see what exactlty your talking about.
    Reply With Quote Reply With Quote
  3. 10-06-2009, 05:04 AM #3
    sbl
    sbl is offline
    sbl's Avatar
    New User
    Status
    Offline
    Join Date
    Oct 2009
    Location
    Dhaka, Bangladesh
    Posts
    2

    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.
    Reply With Quote Reply With Quote
  4. 12-15-2009, 01:16 AM #4
    Jamclellan36
    Jamclellan36 is offline
    Jamclellan36's Avatar
    New User
    Status
    Offline
    Join Date
    Nov 2009
    Location
    USA
    Posts
    2

    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:
    Reply With Quote Reply With Quote
  5. 01-16-2010, 11:34 AM #5
    markei
    markei is offline
    markei's Avatar
    New User
    Status
    Offline
    Join Date
    Mar 2009
    Location
    Westminster, MD
    Posts
    19

    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!
    Reply With Quote Reply With Quote
  6. 11-23-2014, 04:19 AM #6
    fucuco
    fucuco is offline
    fucuco's Avatar
    New User
    Status
    Offline
    Join Date
    Nov 2014
    Posts
    11

    Re: CSS two column problem

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


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread