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

Thread: clearing float

  1. #1
    Senior Coder
    Join Date
    May 2004
    Posts
    1,456
    Thanks
    15
    Thanked 0 Times in 0 Posts

    clearing float

    I have a menu on my page that is float left.

    then in the main part I have
    a scroller and then an image that are float left
    and under them I have text

    what's the best way in css to have 3 things floated left - but then some text under the 2 right boxes?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello esthera,
    You could just margin your text over to line up under the two boxes. Wouldn't need a float really... hard to say without seeing what your doing.

    Have you already got your menu and boxes positioned?
    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

  • #3
    Senior Coder
    Join Date
    May 2004
    Posts
    1,456
    Thanks
    15
    Thanked 0 Times in 0 Posts
    what do you mean by margin the text?
    I have everythign lined up but when I put my paragraph of text it goes floating to the right of the last float left when I want it under the 2 boxes on teh right (but not under the menu)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    No idea what your trying to do but this text is margined over 220px with this line - p {margin: 10px 20px 10px 220px;}

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 12px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #wrap {
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    #nav {
    	width: 200px;
    	height: 200px;
    	float: left;
    	background: #0f0;
    }
    .box {
    	width: 250px;
    	height: 200px;
    	float: left;
    	margin: 25px;
    	background: #F00;
    }
    p {
    	margin: 10px 20px 10px 220px;
    }
    </style>
    </head>
    <body>
        <div id="wrap">
            <div id="nav">nav</div>
                <div class="box">box 1</div>
                <div class="box">box 2</div>
            <p>
                StartLorem 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 wrap--></div>
    </body>
    </html>
    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

  • #5
    Senior Coder
    Join Date
    May 2004
    Posts
    1,456
    Thanks
    15
    Thanked 0 Times in 0 Posts
    so what am i doing wrong that it is going under the menu. I want it floated to the right of the menu

    code below
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>

    /* CSS Document */

    body{
    background-image: url(bg.gif);
    margin:0px;
    padding:0px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;

    }
    #main{
    margin:auto;
    width:955px;
    }
    #header{
    background-image: url(header.jpg);
    display:block;
    width:955px;
    height:228px;

    }

    * set millions of background images */
    .rbroundbox { background: url(nt.gif) repeat; }
    .rbtop div { background: url(tl.gif) no-repeat top left; }
    .rbtop { background: url(tr.gif) no-repeat top right; }
    .rbbot div { background: url(bl.gif) no-repeat bottom left; }
    .rbbot { background: url(br.gif) no-repeat bottom right; }

    /* height and width stuff, width not really nessisary. */
    .rbtop div, .rbtop, .rbbot div, .rbbot {
    width: 100%;
    height: 7px;
    font-size: 1px;
    }
    .rbcontent { margin: 0 7px; }
    .rbroundbox { width: 950px; background-color:#90bade; }



    #blueblock{
    width: 180px;
    /*border-right: 1px solid #000;*/
    padding: 0 0 1em 0;
    margin-bottom: 1em;
    font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    font-size: 90%;
    background-color: #90bade;
    color: #333;
    }

    * html #blueblock{ /*IE 6 only */
    width: 180px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
    }

    #blueblock ul{
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
    }

    #blueblock li {
    border-bottom: 1px solid #90bade;
    margin: 0;
    }

    #blueblock li a{
    display: block;
    padding: 5px 5px 5px 8px;
    border-left: 10px solid #1958b7;
    border-right: 10px solid #508fc4;
    background-color: #2175bc;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }

    html>body #blueblock li a{ /*Non IE6 width*/
    width: auto;
    }

    #blueblock li a:hover{
    border-left: 10px solid #1c64d1;
    border-right: 10px solid #5ba3e0;
    background-color: #2586d7;
    color: #fff;
    }
    #leftmenu{
    float:left;
    padding-right:15px;
    }

    #marqueecontainer{
    position: relative;
    width: 300px; /*marquee width */
    height: 197px; /*marquee height */
    background-color:#1C64D1;
    color:#ffffff;
    overflow: hidden;
    /*border: 3px solid orange;*/
    padding: 2px;
    padding-left: 20px;

    float:left;
    }

    .slideshowimage{
    padding-right:40px;
    float:right;
    }
    .mission{

    font-weight:bold;
    clear:both;
    text-align:justify;
    padding:5px;
    }
    .homeright{

    }
    </style>
    <script type="text/javascript">

    /***********************************************
    * Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/

    var delayb4scroll=4000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
    var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
    var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

    ////NO NEED TO EDIT BELOW THIS LINE////////////

    var copyspeed=marqueespeed
    var pausespeed=(pauseit==0)? copyspeed: 0
    var actualheight=''

    function scrollmarquee(){
    if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
    cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
    else
    cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
    }

    function initializemarquee(){
    cross_marquee=document.getElementById("vmarquee")
    cross_marquee.style.top=0
    marqueeheight=document.getElementById("marqueecontainer").offsetHeight
    actualheight=cross_marquee.offsetHeight
    if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    cross_marquee.style.height=marqueeheight+"px"
    cross_marquee.style.overflow="scroll"
    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }

    if (window.addEventListener)
    window.addEventListener("load", initializemarquee, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializemarquee)
    else if (document.getElementById)
    window.onload=initializemarquee


    </script>

    </head>

    <body>
    <div id="main">
    <div id="header"></div>

    <div class="rbroundbox">
    <div class="rbtop"><div></div></div>
    <div class="rbcontent">
    <!--main content here-->
    <div id="leftmenu">


    <div id="blueblock">
    <ul>
    <li><a href="#/">Home</a></li>
    <li><a href="#/">Applications</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">General Information</a></li>
    <li><a href="#">Donations</a></li>
    <li><a href="#">Staff</a></li>
    <li><a href="#">Applications</a></li>
    <li><a href="#">Shiurim</a></li>
    <li><a href="#">Audio Shiurim</a></li>
    <li><a href="#">Video Shiurim</a></li>
    <li><a href="#">Photo Album</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Alumni</a></li>
    </ul>
    </div>
    </div>


    <div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
    <div id="vmarquee" style="position: absolute; width: 98%;">
    scroller here <bR><bR><bR>
    scroller here <bR><bR><bR>
    scroller here <bR><bR><bR>
    scroller here <bR><bR><bR>
    </div>
    </div>
    <img src="images/slideshowimage.jpg" width="293" height="197" border="0" class="slideshowimage">


    <div class="mission">
    this text should be under the scroller and image - not under left bar <bR>
    this text should be under the scroller and image <bR>
    this text should be under the scroller and image <bR>
    this text should be under the scroller and image <bR>
    this text should be under the scroller and image <bR>
    this text should be under the scroller and image <bR>
    this text should be under the scroller and image <bR>
    this text should be under the scroller and image <bR>
    this text should be under the scroller and image <bR>
    </div>


    <!--end main content-->
    </div><!-- /rbcontent -->
    <div class="rbbot"><div></div></div>
    </div><!-- /rbroundbox -->




    </div>
    </body>
    </html>

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Use [code] tags please.

    I changed these two:
    Code:
    .rbcontent { margin: 0 7px; overflow: auto;}
    .mission{
    width: 700px;
    float: left;
    margin: 10px 0 0;
    font-weight:bold;
    text-align:justify;
    padding:5px;
    background: #fc6; /*for testing only*/
    }
    The overflow:auto; clears the floats. Read about that here - http://www.quirksmode.org/css/clearing.html
    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

  • #7
    Senior Coder
    Join Date
    May 2004
    Posts
    1,456
    Thanks
    15
    Thanked 0 Times in 0 Posts
    the problem is that doing that messes up the rounded corners from the bottom


  •  

    Posting Permissions

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