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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Side by side divs, with a width

    Hello,

    I will post the html/css below but can anyone explain to me how to get the un-ordered list with ID=menu over to the right. I want the top green bar to span the width of the page but have the logo and navigation menu and content to be "wrapped" in a centered area that is 63em wide. Right now I have it so that logo is in the right spot but I cannot get my nav menu to place right without messing everything else up.

    If you wanted to take the time just saving this code into an html file should show you exactly what I mean because I cannot explain it very well.

    Thanks!

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    
    <style type="text/css">
    * {
    	margin: 0;
    	padding: 0;
    }
    #container {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 1em;
    	width: 100%;
    	min-width: 63em;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    #header {
    	height: 4em;
    	background-color: #ADD3A5;	/*border: 1px solid #000;*/
    }
    
    #logo {
    	width: 63em;
    	margin-left: auto;
    	margin-right: auto;
    }
    #menu {
    
    }
    #menu ul {
    }
    #menu ul li {
    }
    #content {
    	margin-top: 8em;
    	margin-left: auto;
    	margin-right: auto;
    	width: 63em;
    }
    .clear {
    	clear: both;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="header">
    		<div id="logo"><img src="logo.png" width="223" height="149" alt="Hippie Mulch logo" longdesc="http://hippiemulch.com#"></div>
    		<ul id="menu">
    			<li><a href="#">Home</a></li>
    			<li><a href="#">Order Now</a></li>
    			<li><a href="#">Products</a></li>
    			<li><a href="#">Far Out Facts</a></li>
    		</ul>
    		<div class="clear"></div>
    	</div>
    	<div id="content">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin venenatis   pulvinar odio, et egestas tortor euismod sed. Donec tincidunt mollis   nisi, eget facilisis leo varius ut.
    		 Curabitur justo risus, porttitor   egestas posuere nec, placerat eu dolor. Etiam elit felis, tincidunt vel   fringilla eget, rhoncus a lorem. Donec nunc nisi, semper quis eleifend   ac, scelerisque eget lorem. Phasellus auctor tincidunt nisl vitae   tristique. Curabitur laoreet tincidunt massa varius sagittis.   Pellentesque habitant morbi tristique senectus et netus et malesuada   fames ac turpis egestas. Quisque ante orci, blandit et semper eu,   porttitor consequat nisl. Suspendisse tristique euismod lobortis. Aenean   sit amet diam magna, vitae posuere ligula. Sed faucibus, mauris nec   elementum viverra, lacus mi aliquet mauris, vel varius enim turpis a   justo. Pellentesque blandit venenatis augue ut ornare. Cras vel neque   lacus, at auctor lectus. Suspendisse potenti. Nam non urna augue, vitae   fringilla nisl. Praesent blandit orci quis orci luctus id bibendum magna   auctor. </p>
    		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam   adipiscing mauris a justo vehicula varius. Aenean congue rhoncus nibh,   vel dignissim turpis pulvinar id. Mauris
    		 vehicula tincidunt nisi a   pretium. Maecenas semper nibh fringilla dui mattis quis volutpat ipsum   tempus. Vestibulum ullamcorper tincidunt lacus, et facilisis diam ornare   sed. Maecenas pulvinar, velit a pulvinar ultricies, mi tortor dignissim   tellus, at consectetur metus diam sit amet arcu. Fusce luctus rhoncus   quam et posuere. Aliquam vel magna mauris, at varius mi. Curabitur nec   risus non nulla volutpat fermentum. Mauris turpis quam, cursus quis   dapibus non, egestas nec lacus. Vestibulum ante ipsum primis in faucibus   orci luctus et ultrices posuere cubilia Curae; Proin enim ligula,   ullamcorper ac sollicitudin eget, lacinia lobortis quam. Donec facilisis   molestie eros sit amet ultrices. Quisque ut nibh nulla. Vivamus eget   diam in lorem molestie laoreet. Nam eu scelerisque lectus. Sed eu metus   diam, non dignissim erat. Morbi porta auctor lectus, at cursus mi   porttitor ac. </p>
    		<p> Sed ac sagittis tortor. Praesent eget velit gravida odio pharetra   faucibus eget vel tellus. Cum sociis natoque penatibus et magnis dis   parturient montes, nascetur ridiculus mus. Nulla et purus urna, quis   cursus quam. Cras lacus augue, pellentesque sit amet condimentum   tincidunt, consequat non neque. Nullam in sodales quam. Morbi in purus   nec purus iaculis molestie. Donec vestibulum nisi non purus placerat sit   amet euismod est porttitor. Maecenas turpis lorem, tincidunt in varius   porttitor, tempus nec erat. Vestibulum ante ipsum primis in faucibus   orci luctus et ultrices posuere cubilia Curae; Ut sed diam ante. </p>
    		<p> Aenean mattis sollicitudin elit, ut sagittis augue malesuada rhoncus.   Pellentesque habitant morbi tristique senectus et netus et malesuada   fames ac turpis egestas. Nullam nisi mauris, tristique in consectetur a,   suscipit eget sem. Donec id tortor mauris, posuere vestibulum justo.   Nulla facilisi. Donec et aliquam tortor. Pellentesque fringilla   sollicitudin ipsum eu blandit. Nullam ac gravida augue. Fusce at laoreet   sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices   posuere cubilia Curae; Donec posuere lorem et ipsum congue varius. </p>
    		<p> Phasellus suscipit ante eu massa porta vitae pellentesque augue   ultrices. Sed ut fermentum metus. Suspendisse id egestas nisl. Nullam   mattis sodales eleifend. Curabitur hendrerit adipiscing risus vitae   laoreet. Etiam hendrerit arcu quis tellus vestibulum fringilla id et   lacus. Pellentesque tortor lectus, malesuada ac consectetur vel, commodo   accumsan odio. Morbi auctor accumsan mauris sed eleifend. Quisque sit   amet lorem id diam placerat venenatis a sit amet odio. Integer mi   mauris, bibendum ut hendrerit sit amet, consectetur et dui. In hac   habitasse platea dictumst. Cras pharetra dignissim tempor. Aliquam at   neque risus. Nulla fringilla sapien mollis dui vestibulum condimentum. </p>
    	</div>
    </div>
    </body>
    </html>

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    like this? I added a little style to a bunch of things. All of the things I added can be seen in the picture. the width: auto; was to cancel out the width you had set (you can see it crossed out to the right)


  • Users who have thanked Sammy12 for this post:

    mikeken763 (07-27-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sammy12, do you think you could explain what exactly is happening with each of your changes you made?

    On a side note, do you have a recommendation for a good resource for learning positioning and layouts using css? I haven't gotten on too well with the css positioning movement since it became popular. I have been using css with my website designs for a decade but not so much with positioning and so that is what I am trying to learn, but it seems so confusing and it appears there is a million ways to accomplish something with positioning which confuses me even further. Would you recommend I just keep cracking at it myself until I get it better or again is there a good resource?

    Thanks

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Don't worry too much about it, this type of stuff is just learned with time.

    When your floating or position: absolute; an object, they no longer are in the "flow of the page", meaning the element doesn't take up any space (no height! though it does take up width) relative to all the other objects on the page.

    Code:
    #logo {
     float: left;
    }
    we are pushing the #logo to the left. It no longer takes up any space.

    Code:
    #menu {
     float: right;
    }
    we are pushing the #menu to the right. It no longer takes up any space.

    ---

    Everything underneath this will be pushed up because both floated objects do not take up any space.

    This is where clearing comes in.
    I used

    Code:
    .clear {
     clear: both;
    }
    this will essentially give the float its space back on the page. sometimes you don't want floated or absoluted objects space on the page (these are called layers). You can choose which elements you want to clear with: clear: left;, clear:right;, clear:both;, and clear: all;

    ---

    Another way to "clear" an object is to give its parent a height. Though the floated objects do not have a space, the header does! therefore it pushes the content down.

    Code:
    <div class="header" style="height: 80px;">
     <div style="float: left;"></div>
     <div style="float: right;"></div>
    </div>
    floating main objects like a side panel, the logo, etc is the correct way to position objects. Position: absolute; should be used for small positioning such as icons (a search icon within an input), but that's a different story that requires another post
    Last edited by Sammy12; 07-27-2011 at 08:27 PM.

  • Users who have thanked Sammy12 for this post:

    mikeken763 (07-27-2011)

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    On a side note, do you have a recommendation for a good resource for learning positioning and layouts using css? I haven't gotten on too well with the css positioning movement since it became popular. I have been using css with my website designs for a decade but not so much with positioning and so that is what I am trying to learn, but it seems so confusing and it appears there is a million ways to accomplish something with positioning which confuses me even further. Would you recommend I just keep cracking at it myself until I get it better or again is there a good resource?

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    http://www.w3schools.com/cssref/pr_class_float.asp

    There's really no easy way to learn this. Regardless, it's essential to learn since it's how modern pages are made.

    It's one of those things that seems hard in the beginning, but once learned, you will be in love with it

  • Users who have thanked Sammy12 for this post:

    mikeken763 (07-27-2011)

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks a lot Sammy12,

    Your explanation was basically a mini-tutorial and has already helped me with some other positioning stuff on the same page you helped me with.


  •  

    Posting Permissions

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