CSS - Problem Clearing Floats For Footer

Is there a way to only clear floats within an element without affecting any floats defined about and outside the element?

example:

<div style="float:left;">A</div>
<div style="float:right;">
<div style="float:left;">C</div>
<div style="clear:both;"></div>
</div>

I would want the clear to only clear C and not A

Hello,

I'm new to this, hopefully someone can help me out. I recently created a few pages on wordpress for my business. Once I finished (using firefox) I checked to see if my site was compatible with other browser and unfortunately there were several issues. Text, pictures and videos are not aligned properly in Safari, Chrome and IE. Does anyone know what could possibly cause this and how to fix it??

I am also looking for someone to help me in the future for website design, recommendations appreciated.

signature sound .com under "training" and "workshops"

If there is anymore information needed to help me I will provide.

extra info:
I cleared floats within HTML and not within CSS.

Here is some CSS for the training page:

#song-logo {
margin:35px 0px 0px 44px;
}

#discover-songlist1 {
margin:0px 40px 0 50px;
float:left;
}

#discover-info {
float:left;
width:500px;
margin:-36px 0px 0px 130px;
}

#song-pictures {
margin:-65px 48px 0px 0px;
}

#more-info {
margin: -30px 0px 0px 45px
}

#record-logo {
margin:55px 0px 0px 44px;
}

#discover-recordlist2 {
margin:0 143px 0 50px;
float:left;
}

#discover-every {
width:500px;
float:left;
margin:-36px 0px 0px 62px;
}

#record-pictures {
margin:-65px 55px 0px 0px;
}

#more-info2 {
margin: -30px 0px 0px 45px
}

#discover-list3 {
width:460px;
float:left;
margin:50px 0 0 50px;
}

http://www.pearl.ru/isdunyasi/vnewsall.asp


Everything appears right with Firefox and Safari. Footer floats right with IE. Can anyone tell why. Thanks.

hi,

i have some divs within my container div. I cant get the container to wrap around the content in #contentMain (which is inside of #content.

in IE, the container wraps after the #leftNav (inside the #conent) but FF wraps after the #nav div

does anyone know how I cant sort it? thanks

html PHP Code:
<div id="container">

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

<div id="nav">
//topNav
</div>

<div id="content">

<div id="leftNav">
//leftNav
</div>
    
<div id="contentMain">

//content, links, images and stuff

</div>

</div>
</div> 





css PHP Code:
#container {
        margin:0px auto;
        padding: 0;
        width: 760px;
        /*border: 1px solid #666;*/
        background: url(../images/bodyImg.gif) no-repeat top left;
    }

    #header {
        margin:0px auto;
        padding: 0;
        width: 760px;
        height: 100px;
        background: url(../images/header.gif) no-repeat top left;
    }
    
    #nav {
        width:760px;
        height: 25px;
        padding: 0;
        margin:0;
        background-color: #eee;
     }
    
    #content {
        margin:0px auto;
        padding: 0;
        width: 760px;
    }
    
    #contentMain {
        padding: 0;
        margin: 0;
        float: right;
        width: 630px;
    }

    #leftNav {
        color: #000;
        float: left;
        margin: 0;
        padding: 0;
        width: 128px;
    }

    .imgMap1 {
        width: 220px;
        position: relative;
        top: 200px;
        left: 30px;
    } 

Hey all,
Here is my page: tri-m.com/ENGINEERINGSITE/test.html

The page looks what I want it to look like in IE... but if you open it up in FF you will see what I mean.

If I add my clear float <div class="clear"></div> after .Iimage and .Ifeatures, a large space is placed between .imageFeatures and .IfeatureTEXT.

If I do not add the clear (as in my example... than the floats are not cleared in FF obviously).

I'm not quite sure what to do with this case. I'm not really able to find a similar problem.

If someone could help me out that would be AMAZING!

Thanks everyone.
- Jacenta

I have some tabular data that I would like displayed in two columns within a div. The div has some basic styling on it to create a block around the tables. The tables should appear side by side at the top of the div, so I floated the tables. I then found that the width of the div was always 100% unless I floated the div as well. This made the div wrap around the tables nicely, but caused the next element to appear to the right of the div, not on the next line as it normally would.

Here is the basic code I have so far: Code:

<html>
<head>
<style type="text/css">
div.box1 { 
	border: 1px solid red;
	background: #afafaf;
	padding: 2px;
	float: left;
}
div.box1 table { 
	float: left;
	border: 1px solid blue;
	margin-right: 15px;
}
</style>
</head>
<body>
<h1>Div</h1>
<div class="box1">
   <table>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field1:</td>
     <td>Value</td>
    </tr>
   </table>
   <table>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
    <tr>
     <td>Field2:</td>
     <td>Value</td>
    </tr>
   </table>
 </div>
</div>
<h1>Next Text</h1>
</body>
</html>

I would like for the "Next Text" to appear on a new line after the div. After reading this page, I added the following to my css: Code:

div.box1:after {
	content: 'clear me';
	clear: both;
	display: block;
	height: 0px;
	visibility: hidden;
}

However, this had no effect on the results in Firefox or Safari. The only way I have found to clear the div is to add style="clear: both" to the h1 tag following the div. I would prefer to not do this because it will be problematic for our graphics guys down the road. Any advice on how to clear the div and keep it wrapping around the tables?

I've got two columns set-up using floats. They work fine in Firefox, Opera and Konqueror on my machine, but a friend with Windows informs me that it doesn't work properly in Internet Explorer.

The code is as follows:

Code:

div.get_content_voc_left {
 width: 50%;
 float: left;
 clear: both;
}
div.get_content_voc_right {
 width: 50%;
 float: right;
 clear: none;
}

The results in IE can be seen in this screenshot and this screenshot.

Those with IE can have a look at a live copy of the HTML here and the CSS here.

Any help is appreciated

I'm trying to construct a simple navigation bar that looks like the attached image. It's a simple bar with rounded corners on the ends.

If I where going to use tables, I would make one row with three cells. But I hear that these days, tables for positioning are out...

I'm thinking two sets of DIVs where one contained the left end, and one the right. What's confusing me is how to get the images to line up right rather than looking "stacked". I imagine it has to do with the "float" attribute, but I can't seem to find the combination that does what I need.
Code:

<div>
  <div>
    Nav  |  Bar  |  Content
  </div>
</div>

As well, how to make the full height of the end images show? My experiments seem to truncate the image height at the height of the text.

Pointers?

Thanks...

Hi Guys,

I am having a problem with floats.

Here is the code I am using:

Code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width:900px; border: 1px black solid; float:left;">
<div style="width:400px; height:100px; border: 1px black solid; float:left; display:inline; background-color:blue;"></div>
<div style="width:400px; height:300px; border: 1px black solid; float:left; display:block; background-color:green;"></div>
<div style="width:400px; height:100px; border: 1px black solid; float:left;display:inline;  background-color:red;"></div>
</div>
</body>
</html>

I am trying to get the red box to appear right under the blue box. I don't want to use a 2 column layout. Is this possible?

Thanks!
Elad

Hello all.

I've got a layout with three columns. The first column contains the navigation and the second two are variable content. All the columns can be any length, and consist of any number of divs; each div is a bordered block of variable-sized content.

The problem is if I want to float an image around some text in the second or third column. Since the image is floating, its container doesn't extend fully, and the image overlaps the border and the block below it. However, if I put a "clear: both" spacer within the block, then the container clears elements in the left or right columns, and extends way too far down!

What I really need is a way to just clear a single level of nesting, but "clear" seems to be pretty much all or nothing.

I've also tried the pseudoclass :after trick to extend the box, but that didn't appear to do any good. It just added the content inside the border of each block, but doesn't enclose the image at all.

I hope somebody has suggestions - I actually haven't found anything about this problem, but perhaps I'm just looking for the wrong terms. It seems like a fairly fundamental thing to do...

Thanks!

Hey,
I use floats in my page to position some div's.
The page validates for both css and html-strict.

When i run the code below in firefox, everything works fine.
When i run it in Internet explorer, it does not. It looks messed up then.

PHP Code:
echo '<form name="contact_action" id="contact_action" method="post" action="process/contact_action.php?act=del">';
while($contact = mysql_fetch_array($query_result,MYSQL_ASSOC)){
    echo '<div style="float: left; width: 25%; margin: 0%; padding: 0%;">';
    echo    '<input type="checkbox" name="selected_contacts[]" value="'.$contact['contact_id'].'">&nbsp;';
    echo    $contact['first_name'] . '&nbsp;' . $contact['last_name'];
    echo '</div>';
    echo '<div style="float: left; width: 75%; margin: 0%; padding: 0%;">';
    echo    '<a href="contact_info.php?contact_id='.$contact["contact_id"].'&act=edi">view</a>';
    echo    '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=edi">edit</a>';
    echo    '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=del">delete</a>';
    echo '</div>';
}

echo '<div style="float: left; width: 100%; margin: 0%; padding: 0%;">';
echo '<br>';
echo '<input type="submit" name="delete_selected" id="delete_selected" value="Delete Selected">';
echo '<br><br>';
echo 'Total '.$nr_of_rows.' Contacts';
echo '</div>';
echo '</form>'; 





hope you can help me.

thanks in advance

Well I am having serious problems with CSS floats.

I created a design in Photoshop, sliced it and imported everything in Dreamweaver. So far, so good. However when you slice with Photoshop, you get a CSS with "position: absolute", which I am trying to avoid.

However I managed to get the header partially correctly floated, but for some reason, it doesn't display correctly in Firefox. Not to mention Internet Explorer 8, which shows (empty) spaces everywhere (tried padding/margin 0px, but didn't do anything).

Can someone take a quick peek and see what I am doing wrong here? And if possible correct the errors or tell me what I am doing wrong?

Cause I am really hitting a brick wall at the moment.

Here is the page: link

Thanks in advance.


//edit


Okay I fixed the empty space problem in IE, I seem to have forgotten to set the doctype up correctly; my bad.

But I am still having a problem with the floats.

Hello, not sure I know how to explain this. I have a page that I want to divide in two parts. To do so I am using floats. The problem is that the content in one div is not the same as the content in the other div and therefore the height of the two floated div is different from one another.

However, I want that the div's have a border that seperates them and I would like this border to be from top to bottom of the containing div regardless of which of the two floated div is the highest. I could do this with javascript but I would like to know if there is some pure html/css option.

Here is my example;

Code:

<html>
	<head>
	
		<style>
		
		.main {
			margin: 0px auto;
			width: 800px;
			border: 2px solid red;
		}
		
		.wrap:after{

			content: ".";
			display: block;
			position:relative;
			height: 0;
			clear: both;
			visibility: hidden;
		}

		.wrap{

			display: inline-block;
		}

		/* Hides from IE-mac \*/
		* html .wrap{height: 1%;}
		div.wrap{display: block;}
		/* End hide from IE-mac */
		
		
		.left {
			float: left;
			width: 100px;
		}
		
		.right {
			float: left;
			width: 680px;
			border: 10px solid blue;
		}
		
		
		</style>
	
	</head>
	<body>
	
		<div class="main">
			<div class="wrap">
				<div class="left">My left div has more.<br/>more..<br /><br />more...<br /><br /><br />lines then the right one</div>
				<div class="right">My Right div has only one line but need border till down there ...</div>
			</div>
		</div>

		
	</body>
</html>

As you can see in the example the border of the right div does not go down till the bottom border of the main div.

Hey,
I got a webpage that looks like it should in both IE 6.0 and firefox 2.0.
Now i went testing it in opera and it has a problem with some div positions.

Here is how it looks in firefox and IE:
Internet explorer:http://img442.imageshack.us/img442/8176/iexz2.jpg
firefox:http://img361.imageshack.us/img361/5503/firefoxqc0.jpg

And this is how it looks in Opera 9.10:http://img442.imageshack.us/img442/5125/operauw7.jpg

The buttons signout, new contact and contact list are shifted to the low.

I use this code on every page do display the header with the buttons ( the red part is the div with the buttons in it.
Code:

<body>
<div class="containingTitles">

<div class="titleNavDiv">
    <b>Hello, stefan.</b>
</div>
 
<div class="titleContentDiv">
    <form action="search_contact.php" name="search" id="search" method="get">
        <div style="float: left; width: 35%; margin: 0%; padding: 0%;">
            <input type="text" style="width: 50%" name="sq" value="" id="sq">&nbsp;
            <input type="submit" name="s" value="Search" id="s">
        </div>
    </form>
    <form name="new_contact" id="new_contact" method="get" action="new_contact.php">
        <div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">
            <input type="submit" name="nc" value="New Contact" id="nc">&nbsp;
        </div>
    </form>
    <form name="contact_list" id="contact_list" method="get" action="contact_list.php">
        <div style="float: left; width: 22%; margin: 0%; padding: 0%;">&nbsp;
            <input type="submit" name="cl" value="Contact List" id="cl">
        </div>
    </form>
    <form name="logout" id="logout" method="get" action="logout.php">
        <div style="float: left; width: 20%; margin: 0%; padding: 0%; text-align: right;">
            <input type="submit" name="lo" id="lo" value="Sign out">&nbsp;&nbsp;
        </div>
    </form>
</div>
</div> 

<div class="navigationDiv">
    <div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username1</a></div>
    <div class="unselectedContact"><a href="contact_info.php?contact_id=102">Username2</a></div>
    <div class="selectedContact"><a href="contact_info.php?contact_id=102">Username3</a></div>
    etc.
</div>

<div class="contentDiv">
----- contents of the page -----
</div>

</div>

And belowis the css code i use to float the divs into position.
And here you can see the division of the pages and which class belongs to which div:
http://img353.imageshack.us/img353/1503/layoutai3.jpg
css Code:
Original - css Code body{ margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; background: url(background.jpg) 22% 0; } .containingTitles{ float: left; width: 100%; margin: 0%; padding: 0%; background-color: #4D3D4D; color: white; overflow: hidden; } .titleNavDiv{ float: left; width: 20%; margin: 0%; padding-left: 2%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .titleContentDiv{ float: left; width: 77%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 1%; padding-bottom: 1%; overflow: hidden; } .navigationDiv{ float: left; width: 22%; margin: 0; padding-left: 0%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #FFFFFF; background-color: #4D3D4D; } .contentDiv{ float: left; width: 76%; margin: 0; padding-left: 2%; padding-right: 0%; padding-top: 0%; padding-bottom: 0%; overflow: hidden; color: #000000; background-color: #BFACBF; }

  

  


 body{


     margin: 0;


     padding-left: 0%;


     padding-right: 0%;


     padding-top: 0%;


     padding-bottom: 0%;


     background: url(background.jpg) 22% 0;


 }


 .containingTitles{


     float: left;


     width: 100%;


     margin: 0%;


     padding: 0%;


     background-color: #4D3D4D;


     color: white;


     overflow: hidden;


 }


 .titleNavDiv{


     float: left;


     width: 20%;


     margin: 0%;


     padding-left: 2%;


     padding-right: 0%;


     padding-top: 1%;


     padding-bottom: 1%;


     overflow: hidden;


 }


 .titleContentDiv{


     float: left;


     width: 77%;


     margin: 0;


     padding-left: 0%;


     padding-right: 0%;


     padding-top: 1%;


     padding-bottom: 1%;


     overflow: hidden;


 }


 .navigationDiv{


     float: left;


     width: 22%;


     margin: 0;


     padding-left: 0%;


     padding-right: 0%;


     padding-top: 0%;


     padding-bottom: 0%;


     overflow: hidden;


     color: #FFFFFF;


     background-color: #4D3D4D;


 }


 .contentDiv{


     float: left;


     width: 76%;


     margin: 0;


     padding-left: 2%;


     padding-right: 0%;


     padding-top: 0%;


     padding-bottom: 0%;


     overflow: hidden;


     color: #000000;


     background-color: #BFACBF;


 } 

hope you can tell me why this happens.

Thanks in advance.