SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quick help with a floating element?

    Hi All,

    One quick question. I'm working on a CSS layout which is going well. But I have a problem with a div id element called #search_box.

    Basically I want to give it a greater height and so it floats over #main as well, but when I try this it effects the other elements on my site. Basically I'd like it to look like this:



    Thanks

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Website</title>
    <style type="text/css">
    /* Start the stylesheet */
    
    * { padding: 0; margin: 0; }
    
    
    body {
     font: normal 11px verdana, arial,verdana,helvetica,sans-serif;
     background: #103A93;
     color: #000;
    }
    
    #wrapper { 
     margin: 0 auto;
     width: 974px;
     padding: 10px;
     overflow:auto;
    }
    
    #masthead {
     width: 438px;
     height: 65px;
     background-color: #103A93;
     float: left;
    }
    
    #bannerbox {
    width: 536px; 
    height: 65px; 
    float: right; 
    padding: 0;
    background-color: #eeeeee;
    margin-bottom: 8px;
    }
    
    #header {
     width: 974px;
     background: #103A93;
     margin-bottom: 8px;
     height: 120px;
     clear:both
    }
    
    #picture {
     width: 966px;
     border: 4px solid #FFF;
     background-image: url('../images/backgrounds/bg1.png');
     height: 270px;
     clear:both;
    }
    
    #search_box  {
     clear:left;
     position: relative;
     top: 160px;
     left: 750px;
     z-index: 5001;
     margin:0;
     width:220px;
     height: 5px;
     background: #000;
    }
    
    #main {
     float: left;
     color: #000;
     width: 974px;
     height: 400px;
     background: #FFFFFF;
    }
    
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="masthead"><img src="....../images/mastheads/logo.png" alt="logo"/></div>
        <div id="bannerbox"></div>
         <div id="search_box"></div>
        <div id="picture"></div>
        <div id="main"></div>
    </div>
    <!-- End wrapper-->
    </body>
    </html>

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure which element is supposed to be which, but something like this should help:

    Code:
    #bluebox {
        height: 300px;
    }
    
    #blackbox {
        height: 900px;
        float: right;
        margin: -100px 0 0;
    }
    
    #white box {
        height: 400px;
    }
    So, basically, give the black box a negative margin-top, which should push it over the blue box.

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, That helps a lot but just one question.

    Where the blackbox starts and the whitebox ends I kind want a box to fill out the blue bits. Almost another div that resides under that black box, and changing the background is not an option. Any Ideas? IE like the original screenshot I posted


    Here's the code:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    body {
     font: normal 11px verdana, arial,verdana,helvetica,sans-serif;
     background: #103A93;
     color: #000;
    }
    
    #wrapper { 
     margin: 0 auto;
     width: 974px;
     padding: 10px;
     overflow:auto;
     background-color: #103A93;
    }
    
    #bluebox {
     width: 954px;
     height: 270px;
     background-color: #103A93;
     border: 5px solid #FFF;
    }
    
    #blackbox {
        height: 500px;
    	width:220px;
        float: right;
        margin: -100px 5px 0;
    	background-color: #000;
    }
    
    #whitebox {
        float:left;
        width: 721px;
        height: 200px;
        border: 5px solid #FFF;
    	background-color: #FFF;
    	
    }
    
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="bluebox"></div>
        <div id="blackbox"></div>
        <div id="whitebox">
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum risus nisl, volutpat in, condimentum ac, lobortis a, mi. Cras quam. Nulla pede felis, dapibus nec, viverra quis, tincidunt id, pede. Mauris pharetra adipiscing dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec condimentum lorem in lorem. Sed eget tellus. Quisque lorem odio, sodales sed, convallis et, ullamcorper vitae, lacus. Nulla nisl urna, imperdiet molestie, feugiat a, venenatis et, ipsum. Morbi sagittis lectus sit amet arcu. Etiam at magna. Nunc fermentum sodales mauris. Aenean at turpis et sapien interdum iaculis. Phasellus nisi risus, ultrices sit amet, fringilla a, iaculis et, nisi. Vestibulum sapien. Proin dui nunc, ornare non, auctor non, blandit quis, est. Aliquam elementum, dui vel suscipit eleifend, quam dui consequat tortor, vel vehicula lectus odio eget ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pellen       tesque. Pellentesque sed nisi. </p>
    	</div>
    </div><!-- End wrapper-->
    
    </body>
    </html>


Bookmarks

Posting Permissions

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