Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    mtd
    mtd is offline
    Regular Coder
    Join Date
    Jun 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS 2-column layout: middle margins don't work

    Hi all,

    Got a simple 2-column css layout with divs. HTML:
    Code:
    <div id="page_col_left">
         <div id="header_logo">
         <img src="../images/logo/header.gif" />
         </div>
         <ul id="nav_main" class="nav_main_page">
         <li><a href="1/">1</a></li>
         <li><a href="2/">2</a></li>
         <li><a href="3/">2</a></li>
         <li><a href="4/">4</a></li>
         </ul>
    </div>
    
    <div id="page_col_right">
         page text here....
    </div>
    and CSS:
    Code:
    div#page_col_left {
    	width: 200px;
    	float: left;
    	padding-right: 10px;
    	background-color: #FFF;
    }
    
    div#page_col_right {
    	border: 20px solid #000;
    	padding-bottom: 400px;
    	background-color: #E8E8E8;
    }
    Problem is, while the text inside the second column lines up flush with the left side of the first column, any background color, margin, padding, border, etc. in the second column disappears behind the first. There is a 20px border there now, but I tried it with a 20px padding and a 20px margin as well, and the same result - it lines up with the left of the page as if the first column were not there. Yet the text in the second column "behaves."

    I have tried to stay away from floating the second column because that would require defining a width. Due to larger design considerations, things would be a lot easier if I could avoid doing so.

    Is there a way to prevent that overlap and make them line up next to each other correctly?

  • #2
    mtd
    mtd is offline
    Regular Coder
    Join Date
    Jun 2003
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For now, I've resorted to making the left margin of the second column the width of the first column, plus whatever I want the visible margin to be. Is this the best solution?

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by mtd View Post
    For now, I've resorted to making the left margin of the second column the width of the first column, plus whatever I want the visible margin to be. Is this the best solution?
    That depends on whether your 2nd column has a fixed width (effectively). We need to see the rest of your page in order to tell. Does your wrapper have a fixed width? If so, it may be better to float the 2nd column too and give it a width.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •