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
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Exclamation Columns all messed up CSS

    What am I doing wrong here -

    HTML:
    Code:
    <body>
    <div id="header-container">
    	<div id="header-content">
        	<div class="logo"></div>
            <div class="quick-nav"></div>
            <div class="phone-number"></div>
        </div>
    </div>
    <div id="menu-container">
    	<div id="menu-content">
        	<div class="top-menu"></div>
        </div>
    </div>
    <div id="rotator-container">
    	<div id="rotator-content"></div>
    </div>
    <div id="cta-container">
    	<div id="cta-content"></div>
    </div>
    <div id="middle-container">
    <div id="body-container">
    	<div id="content-container">
        	<div id="col1">
            	<ul>
                	<li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            </div>
            <div id="col2">
            	<h3>Welcome - Headline goes here</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam enim nunc, dapibus eu pulvinar non, ornare sit amet augue. Curabitur eget augue placerat tortor cursus sodales non quis tortor. Ut facilisis, augue id luctus ultricies, est lectus placerat nisl, id sodales tellus leo quis urna. Morbi eget purus tellus, et porttitor leo. Maecenas facilisis leo eget lorem bibendum porttitor. Curabitur id egestas tortor. Integer sit amet pellentesque ipsum. Etiam iaculis sapien sed neque accumsan vitae rutrum massa adipiscing. Mauris ornare auctor suscipit.</p>
                <p>Suspendisse potenti. Quisque iaculis consequat elit, sed congue turpis pharetra vitae. Curabitur vehicula ligula non tellus fringilla faucibus eu id lacus. Aenean dignissim ligula suscipit libero adipiscing et fringilla nibh rhoncus. Fusce suscipit ultrices accumsan. Sed aliquet lorem vel mi molestie tempus. Sed porttitor mollis vestibulum. Quisque tristique nisl tristique odio mattis posuere.</p>
                <p>Nunc non est sed lacus condimentum tempus quis vel ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque at facilisis lorem. Sed ante velit, sodales sit amet pharetra non, euismod id risus. Ut viverra neque ut nunc congue porta. Etiam lorem erat, iaculis sit amet iaculis quis, ullamcorper sit amet lectus. Nulla ut tempus orci.</p>
            </div>
        </div>
    </div>
    </div>
    <div id="footer-container">
    	<div id="footer-content"></div>
    </div>
    </body>
    and my CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body{margin:0; padding:0; background:url(images/bg.jpg) repeat; display:block;}
    .clear, .clearfix{clear:both;}
    
    #middle-container{width:1007px; margin-left:auto; margin-right:auto;}
    #middle-container #body-container{clear:left; float:left; width:100%; overflow:hidden; background:#F4E2C3; padding-bottom:21px;}
    #middle-container #body-container #content-container{float:left; position:relative; width:232px; left:10px; top:11px; bottom:11px; right:764px; border:1px solid #B6A58E;}
    #middle-container #body-container #content-container #col1{float:left; position:relative; width:230px; top:12px; padding-bottom:20px;}
    #middle-container #body-container #content-container #col2{float:left; position:relative; width:674px; left:266px; top:12px; padding-bottom:40px;}
    any thoughts, suggestions plz

    not sure why my right side content is all the way down the container instead of aligning w/ the top of the document like it should. the design idea is pretty self-explanatory.

    Thanks for your help in advance!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello andwfara1,
    You float #content-container, #col1 and #col2 ...and you position them as well. Two different things there.

    At 232px wide #content-container is your left column but you put #col2 inside it.

    Look at this example of how simple a two column layout can be.

    You are also nesting div elements inside each other too much. That's called divitis. See what divitis is and how to avoid ithere.

    Look at your code a little differently here -
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    body {
    	margin: 0;
    	padding: 0;
    	background: url(images/bg.jpg) repeat;
    }
    #middle-container {
    	width: 1007px;
    	margin: 50px auto;
    	overflow: auto; /*to clear the floats*/
    	background: #F4E2C3;
    	padding: 21px;
    }
    #content-container {
    	width: 232px;
    	float: left;
    	padding: 0 0 200px; /*to simulate content*/
    	border: 1px solid #B6A58E;
    }
    #col2 {
    	margin: 0 0 0 250px;
    	padding-bottom: 40px;
    }
    </style>
    </head>
    <body>
        <div id="middle-container">
            <div id="content-container">
                <ul>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                    <li>test</li>
                </ul>
            <!--end content-container--></div>
            <div id="col2">
                <h3>Welcome - Headline goes here</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                        sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
                        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
                        duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </p>
            <!--end col2--></div>
        <!--end middle-container--></div>
    <div id="footer-container">
    	<div id="footer-content"></div>
    </div>
    </body>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    andwfara1 (01-11-2013)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thanks for your help! I will definitely look at the divitis topic - definitely something my boss has raised an eyebrow about as well.

    Problem Solved!


  •  

    Posting Permissions

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