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

    Embedding Divs and Floating them

    Hey guys.

    I am using CSS and div tags to create a layout for a webpage.

    It is a 3 column layout with a top banner div and a bottom footer div.

    My question is, how can I embed the #articlesnav div and the #librarynav div within the #right div, and have them float to the left within that div?

    Code:
    #container
    {
    width: 90%;
    margin: 10px auto;
    background-color: #fff;
    color: #333;
    border: 1px solid gray;
    line-height: 130%;
    }
    
    body
    {
    text-align: center;
    }
    
    div#container
    {
    margin-left: 10px auto;
    margin-right: 10px auto;
    text-align: left;
    }
    
    #top
    {
    padding: .5em;
    background-color: #9FA41D;
    border-bottom: 1px solid gray;
    text-align: left;
    }
    
    #top_banner {
    float: left;
    padding: 0;
    text-align: left;
    }
    
    #top h1
    {
    padding: 0;
    margin: 0;
    }
    
    
    #left
    {
    float: left;
    width: 160px;
    margin: 0;
    }
    
    
    #navlinks {
    width: 160px;
    float: left;
    margin: 0;
    padding: 1em;
    }
    
      
    #right
    {
    width: 160px;
    float: right;
    margin: 0;
    }
    
    
    #articlesnav
    {
    float: left;
    width:160px;
    margin:0;
    }
    
    #librarynav {
    width:160px;
    float: left;
    margin:0;
    
    }
    
    #search {
    float: right;
    width: 160px;
    margin: 0;
    padding: 1em	;
    }
    
    #content
    {
    margin-left: 200px;
    border-left: 1px solid gray;
    margin-right: 200px;
    border-right: 1px solid gray;
    padding: 1em;
    }
    
    #footer
    {
    clear: both;
    margin: 0;
    padding: .5em;
    color: #333;
    background-color: #9FA41D;
    border-top: 1px solid gray;
    }
    When I embed them into the #right div, they are aligned to the right and they flow over the right side of the side, and they have a bit too much margin space to the left... is this the padding of the #right div acting on the embedded divs?

    Also, when i do this:

    Code:
    <div id="left">
    
    <div id="navlinks">
    <p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Online Library</a></span></p>
    <p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Articles</a></span></p>
    <p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Forums</a></span></p>
    </div>
    
    <p>&nbsp;</p>
    </div>
    ^ the #navlinks div overflows to the left of the #left div. I don't even know if embedding divs is possible... How can I get it so that I can have multiple divs floated to the right, one on top of the other?

    Please help!

    - sab
    Last edited by sab3156; 03-08-2008 at 05:57 PM.

  • #2
    New Coder
    Join Date
    Mar 2008
    Location
    Aurora, Illinois
    Posts
    61
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Hi sab,

    Can you show me the full HTML and CSS for this page? I'm noticing a few things that will conflict with what you're trying to do here (such as relying too much on browser defaults and re-styling rules when there's no need to), but if I can see the full page code, I'll definately be able show you how to do what you want while also fixing the other problems as well.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    You are using a class 'navlink' but there is no navlink class in your CSS.

    Have a look here.

    http://snook.ca/archives/html_and_cs...g_css_layouts/
    Don't forget the DOCTYPE - It's very important.

    Frank
    Last edited by effpeetee; 03-08-2008 at 07:58 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Dan Schulz View Post
    Hi sab,

    Can you show me the full HTML and CSS for this page? I'm noticing a few things that will conflict with what you're trying to do here (such as relying too much on browser defaults and re-styling rules when there's no need to), but if I can see the full page code, I'll definately be able show you how to do what you want while also fixing the other problems as well.
    Hey Dan, thanks for your offer to help! Here is the code:

    Code:
    <html>
    <head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta name="generator" content="HAPedit 3.1">
    
    
    <link href="css/layout.css" rel="stylesheet" type="text/css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    
     <div id="container">
    <div id="top">
    <div id="top_banner"><h2>Banner Here ---- </h2></div>
    
    <div id="search">
    search:
    </div>
    
    <p>&nbsp;</p>
    </div>
    
    
    <div id="left">
    
    <div id="navlinks">
    <p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Online Library</a></span></p>
    <p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Articles</a></span></p>
    <p><span class="navlink"><img src="img/doublerightarrow.gif"> <a href="template.html">Forums</a></span></p>
    </div>
    
    <p>&nbsp;</p>
    </div>
    
    
    <div id="right">
        <div id="articlesnav"><h4>Latest Articles:</h4>
    	<p><img src="img/doublerightarrow.gif"> article article<br>
        <img src="img/doublerightarrow.gif"> article article </p></div>
        
        <div id="librarynav"><h4>New Books:</div>
        
    </div>
    
    
    
    
    
    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore mago eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
      <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
      <p>&nbsp;</p>
      <h2>Updates:</h2>
    <p><i>March 8, 2008</i></p>
    <hr width="100" align="left">
    <p>&nbsp;</p>
    
    <p>&nbsp;</p>
    </div>
    
    
    
    
    
    <div id="footer">
    <center>copyright &copy; ------ 2008</center>
    </div>
    
    
    </body>
    </html>


    Here is the other CSS style sheet (style.css)

    Code:
    
    h2
    {
    	color: #B52C07;
    	font: 120&#37; georgia, times, "times new roman", serif;
    	font-weight: bold;
    	margin: 0 0 2px 0;
    }
    
    h2 a { text-decoration: none; }
    
    h3
    {
    	color: #5B5E0E;
    	font: 106% georgia, times, "times new roman", serif;
    	font-weight: bold;
    	margin-top: 0;
    }
    
    
    
    .floatright { float: right; }
    
    .navlink a:link { color: #B52C07; text-decoration: none; font-weight:bold;}
    .navlink a:visited { color: #B52C07; text-decoration: none; font-weight:bold;}
    .navlink a:active { color: #B52C07; text-decoration: none; font-weight:bold;}
    .navlink a:hover { background-color:#FFFF99; text-decoration: none; font-weight:bold;}
    
    .link1 a:link { color:#000099; text-decoration: none; }
    .link1 a:visited { color:#000099; text-decoration: none; }
    .link1 a:active { color:#000099; text-decoration: none; }
    .link1 a:hover { background-color:#FFFF99; text-decoration: underline; }


    See, what I'm trying to do is have a 3 Column layout and in the left hand and right hand columns, I want some separate divs, one on top of another, like I kinda did on the right side in the html page...

    I would really appreciate it if you could help me with that! Thanks a lot!

    - sab
    Last edited by sab3156; 03-08-2008 at 11:34 PM.

  • #5
    New Coder
    Join Date
    Mar 2008
    Location
    Aurora, Illinois
    Posts
    61
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Great - I have no idea what size the images are. Can you just toss up a link to the page so I know *exactly* what is going on with everything?

  • #6
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey Dan,

    Unfortunately, I can't put up the site right now... But I can send you the zip file so you can check out the files, if you would like. If you would like to do it that way, please PM me your email address and I'll send the stuff right over.

    The images aren't really necessary, so I took them out.

    Please let me know if you have any other suggestions.

    - sab


  •  

    Posting Permissions

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