Jump to content

Float and Clear


Recommended Posts

Hi guys and girls!I have a very basic problem but I am in desperate need of a weekend to work on my css skills, unfortunately that hasnt presented itself yet so hopefully one of you can give me a hand.The site I am working on is a tableless site (I used a premade template since I ###### at css). Now when Im changing stuff in the left menu bar the text in the main middle part of the site is wrapping across. I read that when you use the float:left function, any left over text will wrap around and you need to use clear: left to stop that. Well... I tried that but its not working.code in seperate css file:

.floatLeft {  float: left;  clear: left}

relevant code in a php file (there is an include line higher up):

<div class="floatLeft width25">blahblahblah</div>

so since blahblahblah is so short in height the text from the main section of the site is wrapping across. Help please!! :)

Link to comment
Share on other sites

What is with this code:

<div class="floatLeft width25">

That will not work. Do you mean

<div class="floatLeft" style="width:25px; ">

Link to comment
Share on other sites

If you want the first div to be floated left and the second div to NOT wrap under the floated div, use a margin on the second div equal to or larger than the width of the floated div.

#rightcol{		 margin-right:6px;		 margin-left:16em; // see here for the margin width of the right-hand column		padding-left:6px;}#menu_column{	background-color: #FFFFFF; 	padding-left:10px; 	float: left;		padding-top:10px;		width: 15em;	   // see here for the width of the menu column}

Make sure that the menu-column is the first column listed in your html page, too.http://jlhaslip.trap17.com/samples/templat...left/index.html:)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...