...

View Full Version : clearing float



esthera
02-24-2009, 08:23 AM
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?

Excavator
02-24-2009, 08:30 AM
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?

esthera
02-24-2009, 08:33 AM
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)

Excavator
02-24-2009, 08:40 AM
No idea what your trying to do but this text is margined over 220px with this line - p {margin: 10px 20px 10px 220px;}


<!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>

esthera
02-24-2009, 08:54 AM
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>

Excavator
02-24-2009, 09:15 AM
Use
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

esthera
02-24-2009, 09:25 AM
the problem is that doing that messes up the rounded corners from the bottom



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum