Learn VBA & Macros in 1 Week!

CSS - Float And Clear: Searching For Another Solution

Full Excel VBA Course - Beginner to Expert

Float And Clear: Searching For Another Solution	View Content

Scenario:::
So I got < div > or < p > with < img > inside. < img > that has < float:left >, so that text nicely warps around the < img > along its right side. I also got my < p > with < border:1px solid #CC33CC >, as I have lets say five words within < p >, now my < p > element and its border wraps around text and does not take < img > into consideration and it will seem fine as normal flow has been broken as explained by CSS standard, but I want to make sure that this border of my < p > or < div > element warps around the < img > as well, so we fix it with < div > that has < clear:both > and style, just an empty element.

Question:::
I would like to illuminate insertion of empty element with < clear:both >, although it makes perfect sense to insert such styled empty element to fix the flow so that it will wrap the < img > as well. But I wonder if there is another method available.
It just feels redundant.

Full Excel VBA Course - Beginner to Expert

Float Or Clear Issue?

Similar Tutorials

View Content

In this header www.johnschureman.com

I have an image, an h1 and a subtitle div.

Code:

<div id="header">
<img src="../images/jschu-crop150h.jpg">
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" >:<?php bloginfo('name'); ?></a></h1>
	<div id="subtitle">
		<!-- Here's the tagline  -->
		<?php bloginfo('description'); ?>
	</div>
</div>

I cannot figure out in my css how to make the subtitle appear below the h1.

Code:

#header {
	margin:0; 
	padding:0;
	height:170px;
	padding: 0px;	
	margin-top: 3px;
/*	padding-top:110px;
	padding-bottom:10px;
	padding-right:20px;
	padding-left:5px;*/
	border-bottom: 1px solid #bab1b1;
	background: #404040;
}
#header img {
	float:left;
	display:inline; 
	margin: 0 auto;	
	padding: 10px 10px;
	border:none;
	}
#header h1{
	display: inline;
	float:right;
	padding:0px;
	margin: 0px;
	padding-top:100px;
	margin-bottom:3px;
	margin-right: 5px;
	font-size: 2.4em;
	letter-spacing:0.1em;
}

#subtitle {
	text-align:right;
	font-family:"Century Gothic", "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
	margin-bottom:3px;
	margin-right: 5px;
	font-size: 0.9em;
	text-transform:uppercase;
	color:#bbb;
}

Hope this is enough info. I've been playing with clear, position, etc. Help? Thanks in advance.

- Willi

Clear Float In Firefox 1.0x

Similar Tutorials

View Content

Does anyone know why the clear: left isn't working on firefox 1.0 on this page.

Generic Page with floating divs and then clearing them for a new line.
http://section31.us/temp/float_boxes.html

Am I doing something wrong or is this a bug?

Nested Float Clear?

Similar Tutorials

View Content

I can't figure out how to clear the float for the columns with the text column 1 and 2. If the other columns dont have a lot of text then the footer defaults to just under the image so where that 1+2 start.

Any ideas plase?

Code:

<div id="container">
  
    <div id="home_col_1">
        <img src="images/holder_slideshow.png" alt="" width="446" height="365" />
        <div id="home_col_1_1">
            column 1<br />
            column 1<br />
            column 1<br />
            column 1<br />
            column 1
      </div>
        <div id="home_col_1_2">
            <p> column 2</p>
            <p>column 2</p>
            <p>column 2</p>
            <p>column 2</p>
            <p>column 2</p>
            
      </div>
    </div>
    
  <div id="home_col_2">
    <p>column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3<br />
column 3</p>
  </div>
    
  <div id="home_quicksearch">
        Search Box Here
  </div>
    
    <div id="home_col_3">
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
      <p>column 4</p>
  </div>
    
  <div id="home_col_4">
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
      <p>column 5</p>
  </div> 
  
<div class="clear_floats"></div>     
</div>

Code:

#container				{	width: 986px; margin:0 auto; }

#home_col_1				{	width:446px; height:365px; float:left;	 }
#home_col_1_1			{	width:207px; float:left; padding:0 10px 0 0; border-right:#CECECE 1px solid; margin-top:10px;	 }
#home_col_1_2			{	width:207px; float:left; padding:0 10px 0 10px; border-right:#CECECE 1px solid; margin-top:10px;		 }
#home_col_2				{	width:171px; float:left; padding:10px 10px 0 10px; border-right:#CECECE 1px solid; }
#home_col_3				{	width:165px; float:left; padding:0 10px; border-right:#CECECE 1px solid; }
#home_col_4				{	width:142px; float:left; padding:0 10px; }

#home_quicksearch		{ 	width:328px; padding:10px 10px 10px 0; float:left; border-bottom:#CECECE 1px solid; margin:0 0 10px 10px; 					
							background-color:#FFFFFF; }



#footer 				{ width: 966px; margin:0 auto; padding:10px; margin-top:10px; border-top:#CECECE 1px solid; }

Div Float And Clear Problem

Similar Tutorials

View Content

Hi, Im not sure whats going wrong with this, but I have two DIV elements on the page:

1st div "googleMap"

CSS for googleMap:

#googleMap {
height: 300px;
width: 500px;
float: left;
}

2nd div "page_right"

CSS for page_right:

#page_right {
width: 300px;
clear: left;
float: right;
}

Could someone please tell me why page_right DIV is not clearing the googleMap div?

I've just about had enough so hope some kind person will no the answer!!

Here is the live page (showing the flaw):

belvoir-mortgages.co.uk/contact.php

Thanks

Lee

Float Following Clear Problem In Ie7

Similar Tutorials

View Content

I have some simple code that works in all recent browsers, including IE8+. But with some people out there still using IE7, for which it does something odd, and I've been asked to make it work with that as well.

I've dumbed it down to it's basics, and it's just easiest to see with a visual. http://www.poweredpages.com/test.php

I have four boxes, labeled 1 through 4. It's supposed to wrap at 3, with 4 to the right of that box. In IE7, It wraps at 3 (correctly, because of the clear), but then box 4, which has a float:left after the cleared 3 box, jumps back up to the 1 and 2 row.

Any thoughts on how do get this working with the least amount of editing would be appreciated. In real life, I have the left boxes as a class "label" and the right boxes as another class "input", so if I could just add something to one of these classes and be done w/ it, that would be great. Of course, I could put another entire DIV around each row to fix this, but that would require altering a whole bunch of code.

Thanks!
Prof

Here's the code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <body>
		<div style="clear:both;width:50px;float:left;border:1px solid red">1st</div>
		<div style="float:left;border:1px solid green">2nd</div>
		<div style="clear:both;width:50px;float:left;border:1px solid blue">3rd</div>
		<div style="float:left;border:1px solid orange">4th</div>
	</body>
</html>

Float / Clear Issue With Ie - Please Help!

Similar Tutorials

View Content

This page works fine in Firefox, but in IE, the float makes the content move off the page to the left. I figured out that without a background-color applied to the .textBox style (which is the DIV that contains the text and image I am floating) it works. However, I really would like the .textBox to have a background color. Anybody knows what to do?

Here is the page:
http://www.jbbdesign.com/wip/index4.html

many thanks,
Julia

Label, Float And Clear Problem In Ie

Similar Tutorials

View Content

Hi gyus!

I am trying to recode an form we use, which is based on table layout, to use CSS layout instead, using the label element. The old layout had one input per row with a description text next to the input. After coming up with a successful CSS layout in Safari/Firefox/Opera I tried the page in IE and the layout failed.

All my inputs are floated to the left (at the top, stacked after each other), but the labels are rendered correctly (one label per line) It seems like the label elements doesn't seem to clear the float (so that the label and inputs are aligned)

I broke the code down to the following example: (sorry guys, I don't have the possibility to put it on an publicly accessible server)

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
	<head>
 		<title>Testing</title>
  		<link rel="stylesheet" type="text/css" href="test.css"/>
 		<meta http-equiv="content-type" content="text/html; charset=UTF-8;"/>
	</head>
 	<body>
 		<form name="service" action="label2.html" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8">
			<div>
			<label for="audio_level">Audio Level:</label>
			<input type="text" id="audio_level" value="0"/>
			<label for="audio_level1">Audio Level:</label>
			<input type="text" id="audio_level1" value="0"/>
			<label for="audio_level2">Audio Level:</label>
			<input type="text" id="audio_level2" value="0"/>
			<label for="audio_level3">Audio Level:</label>
			<input type="text" id="audio_level3" value="0"/>
			</div>
			</form>
	</body>
</html>

And the CSS:
Code:

body {
	width:800px;
}
label {
	display:block;
	float:left;
	clear:left;	
	width:100px;
	text-align:left;
}
input {
	display:block;
	float:left;
	width:100px;
}

Applying a <br> element with clear:left after each input seems to fix it, but I is adding extra markup really necessary?

I can't figure out what I am missing to get the one label/input per "line"

Understanding The Clear And Float Elements

Similar Tutorials

View Content

My skills are a little suspect when it comes to properly using the clear and float elements in CSS and I have searched around for a good tutorial showing when and when-not to use the elements, but have not found anything that will suffice.

Anyone have any pointers or tutorials that you think might be worth checking out?

TIA.

Css Float Won't Clear Even With Width & Overflow Fix

Similar Tutorials

View Content

Hey all, up until recently I have used the various styles and hacks using :after or clear:both; to rectify and force divs to clear. However knowing that these methods won't validate and aren't strictly proper, I've decided to ditch all those methods and try to sort floated divs out correctly.

Here is the culprit;
Code:

<div style="height:144px; margin-bottom:10px;">
								
	<div style="height:110px; padding:0px 0px 5px 0px;">
		<div style="width:80px; height:110px; float:left;">
			<div><!-- DYNAMIC IMAGE --></div>
		</div>
	
		<div style="width:655px; height:110px; float:left;">
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC TEXT --></div>
			<div style="padding:5px 0px 2px 10px;"><!-- DYNAMIC DESCRIPTION --></div>
		</div>
	</div>
	
	<div style="height:29px; background-color:#D8D8D8;">
		<div style="padding:7px 0px 0px 10px; margin:0px 5px 0px 0px; float:left;"><!-- DYNAMIC TEXT --></div>
		<div style="padding:7px 0px 0px 10px; float:left;"><!-- DYNAMIC TEXT --></div>
		<div style="padding:3px; float:right;"><!-- DYNAMIC TEXT --></div>
	</div>
	
</div>

The problem is with the contents of . This is user entered through a HTML editor in their admin console. This can have line breaks etc. and therein is where my problem lies.

I have restricted the showing of the "Description" text to 175 chars. Meaning, and providing the user enters more than 175 chars before a line break, it would rarely go on to a new line when displayed in the above page. However if a user added multiple line breaks the content would still display overlaying the bottom, and final div.

Now I understand I could remove line breaks etc before rendering, but I would like not to have to do that, I would rather the "Description" div stretch to accomodate the text however it presents itself than run the risk of one day having "leaking" overlaying content.

I tried the width:100%; overflow:auto; but this results in scrollbars. I don't want to use hidden either because again it rendered badly.

I've also used clear:both; on the final div with no joy.

Is there anything that can be done? I'm sure there is, maybe I just can't see the wood for the trees at the moment.

Any suggestions would be hugely appreciated. Thanks in advance.

Float/clear Function Problem...

Similar Tutorials

View Content

...I am having a problem with images, they display correctly in mozilla firefox (i.e above the text) but incorrectly in internet explorer.
I think it may be due to the float and/or clear functions or maybe the z-index function. here is the htm file... http://www.ajc.kwmaher.com/teebs/...and here is the css file http://www.ajc.kwmaher.com/teebs/style.css . Help appreciated.
Teeb(s)

Float Left Image Clear Problem, Esp Ie Mac

Similar Tutorials

View Content

Hello,

I'm trying to float an image inside a content div that is inside a wrapper div that already has a float left (nav) div earlier in the html. I know that this means that the floated image div will not be cleared until after the already floating nav div, since this is the one that comes earlier in the html and is quite large. It leaves a large gap until it clears the nav div.

I have tried a couple of things, here is the page I'm working on and this is the css file

This hasn't been tested on Windows, so I have no idea how it looks.
It has been tested on the Mac: Safari, Opera, Netscape and Firefox display as described above, but IE Mac is way off whack.

The current setup of the page is this:

HTML: Code:

<div id="content">
	<div id="breadcrumb"><a href="http://www.huntacular.com/">Homepage</a></div>
	
	<div class="image1">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="red">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis 
		parturient montes, nascetur ridiculus mus.</p>
	</div>
	<div class="image2">
		<img class="right" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="orange">Donec accumsan. Pellentesque ac est vitae sapien scelerisque auctor. Nunc pede 
		diam, interdum vel, dictum ut, egestas eget, metus. Maecenas eget sapien.</p>
	</div>
		
	<div class="another3">
		<img class="left" src="./images/pic.png" alt="Mystery Image" width"260" height="150">
		<p class="blue">Etiam vulputate rutrum dui. Cum sociis natoque penatibus et magnis dis parturient 
		montes, nascetur ridiculus mus. Sed vulputate. Nulla ac leo sollicitudin mauris fringilla 
		consectetuer.</p>
	</div>

CSS: Code:

img.left {
	float: left;
	border: solid 1px black;
	padding: 10px;
	margin-right:10px;
	margin: bottom: 10px;
}

img.right {
	float: right;
	border: solid 1px black;
	padding: 10px;
	margin-left:10px;
}

.image1 {
	border: red 1px solid;
	padding : 0px;
}
.image2 {
	border: orange 1px solid;
	padding : 0px;
}
.image3 {
	border: blue 1px solid;
	padding : 0px;
}
/* Trying to sort the float problem - this sends IE Mac nuts, not checked on IE Win */
.another:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}
.another {display: inline-table;}

/* Hides from IE5/Mac \*/
* html .another {height: 1px;}
.another {display: block;}
/* End hide from IE5/Mac */

/* .clearer {
	clear: both;
} */

p.red {
	color: red;
}
p.orange {
	color: orange;
}
p.blue {
	color: blue;
}

Is there a work around? I thought I'd found one in the third attempt - the one with blue text, but I'm not sure if I've implemented it correctly. Also, IE Mac isn't doing any of these correctly either (well, nearly the second one, but I haven't tested this stuff on Windows either.

Is there a solution?

Float/clear Problem In 2-col Liquid Layout

Similar Tutorials

View Content

Hi all,
I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings.
I've found 2 good solution:
1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu.
2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading.

Similar problem is being solved in this thread, but I didn't found there anything working .

Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css.

Float Clear Ie7 Issue (with Validated Code)

Similar Tutorials

View Content

In a nutshell, I want the following page:

http://kznf.com/test/example.html

to display in IE7 how it does in FF3 and Safari 3.1

The only "solution" I've been able to come up with is to enforce a width on some wrapping div. The problem is that sometimes I want it to have a wider width, as seen in example2

http://kznf.com/test/example2.html

Am I doing something wrong? Is there some ridiculous IE7 only solution out there somewhere? I've googled and searched forums and I'm about to give up and go back to table based layout! Someone help!

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" xml:lang="en" lang="en">
<head>
<title>fieldset Test</title>
<style type="text/css">
		
		.floatleft1
		{
			width: 100px;
			height: 100px;
			background-color: green;
			border: 1px solid #000;
			
			float: left;
			clear: left;
		}
		.floatleft2
		{
			width: 100px;
			height: 100px;
			background-color: red;
			border: 1px solid #000;
			
			float: left;
			
		}	

		.previousLine 
		{
			float:left;
			clear:none;
		}

</style>
</head>
<body>

<div class="floatleft1">apple</div>
<div class="floatleft2">red</div>
<div class="floatleft1">banana</div>
<div class="floatleft2">yellow</div>
<div class="floatleft1 previousLine">really?</div>
<div class="floatleft2">yes</div>
<div class="floatleft1">plum</div>
<div class="floatleft2">purple</div>


</body>
</html>

Float:left After Clear:left Botched In Ie

Similar Tutorials

View Content

OK, so I have this nice clean form that I wanted to style up like the table-forms of old. I did it by floating the labels and form elements left, then clearing the labels left so they use their own lines. This works beautifully in Firefox and Safari, but IE (Win, at least) seems to think everything not cleared left should go on the same line! Is this a known IE bug/discrepancy? If so, is there a way to combat it without introducing meaningless elements to the markup (such as encasing each label/element pair in a div)?
Here's some example HTML:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!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" lang="en" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> @import url("style.css"); </style> </head> <body> <form name="form" action="test.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" /> <label for="thoughts">Your Thoughts:</label> <textarea name="thoughts"></textarea> <label for="fun">Having fun?</label> <input type="checkbox" name="fun" value="yes" /> </form> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!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" lang="en" xml:lang="en">


 <head>


 <title>Test</title>


 <style type="text/css">


     @import url("style.css");


 </style>


 </head>


 <body>


  


 <form name="form" action="test.php" method="post">


     <label for="name">Name:</label>


         <input type="text" name="name" />


     <label for="thoughts">Your Thoughts:</label>


         <textarea name="thoughts"></textarea>


     <label for="fun">Having fun?</label>


         <input type="checkbox" name="fun" value="yes" />


 </form>


  


 </body>


 </html>

And the CSS:
css Code:
Original - css Code label { display: block; float: left; clear: left; width: 8em; margin-right: .5em; text-align: right; } input, textarea { display: block; float: left; }

  

  


 label {


     display: block;


     float: left;


     clear: left;


     width: 8em;


     margin-right: .5em;


     text-align: right;


 }


 input,


 textarea {


     display: block;


     float: left;


 }

Css Position (float Right Causes Float Right Underneath To Not Float Right)

Similar Tutorials

View Content

subject isn't too good

anyhow.. i have 4 cells

__ __
|1 | |2 |
--- ---
__ __
|3| |4 |
--- ---

2 and 4 are said to float right, such that 1 and 3 define the height of the page..

but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens

__ __
|1 | |2 |
--- | |
--- | |
|4| ---
---
__
|3|
---

do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right

any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?)

Howto Float Rt, Float Left And Push Down? Not Working...

Similar Tutorials

View Content

Hi There -

Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about.

Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section.

Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later.

Then there's the next section. Rounded corners. Contains the entire page.

On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section.

Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links.

----------

First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back.

Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section.

If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug.

So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu.

---------

It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners.

Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow.

Code:

<div id="top part"
logo and searchbox
</div>

<div>
that pesky space that disappears in IE when roll over primary links
</div>

<div id=navcontainer>
dropdown and tabbed menu
</div>

<div id="navigation" class="menu> <!-- couldn't find the menu class in the css -->
<div id="primary" class="clear-block">
contains barmenu - very fussy
</div>
</div>

Here's the relevant CSS:

Code:


div#navigation {
  background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}


#primary {
  line-height: 30px;
}

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

#primary li {
  display:inline;
}

#primary a {
  font-weight:bold;
  display:block;
  float:left;
  padding:0px 14px 0px 14px;
  margin: 0px 1px 0px 0px;
  font-size: 95%;
}

#primary a {
  background-position:0% 0px;
}

#primary a:hover {
  text-decoration: none;
  background-position:0% -42px;
}

#primary a.active {
  background-position: 0% -84px;
}

#primary a {
  background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
  color:#666666;
  font-size: 120%;
  font-family:Arial,Helvetica,sans-serif;
}

#primary a:hover {
  color: 666666;
  background: #B8B8B8;
}

#primary a.active {
  color: 666666;
  background: #B8B8B8;
}

The Classic Two Column Div Float: Left Will Not Float

Similar Tutorials

View Content

This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture.

here is my css style sheet. A demonstration of the problem can be seen at:

http://www.yourline-online.com/demo05/?How_to_create_pages
Code:

div.float {
    float: left;
    BORDER-RIGHT: #808080 2px solid;
    PADDING-RIGHT: 2px;
    BORDER-TOP: #808080 2px solid;
    PADDING-LEFT: 2px;
    FONT-WEIGHT: lighter;
    FONT-SIZE: medium;
    PADDING-BOTTOM: 20px;
    MARGIN: 16px 2%;
    BORDER-LEFT: #808080 2px solid;
    COLOR: #000000;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: #808080 2px solid;
    HEIGHT: 200px;
    WIDTH: 150px;
    BACKGROUND-COLOR: #ffffff;
    TEXT-DECORATION: none
  }
  
div.float p {
   text-align: center;
   }
div.container {
  border: 2px dashed #333;
  background-color: #ffe;
  }
div.spacer {
  clear: both;
  }

MY HTML is like this:
Code:

H1>How to create pages</H1>
<P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P>
<P></P>
<DIV class=container>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> 
<P>caption 1</P></DIV>
<DIV class=spacer></DIV>
<DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100>
<P>caption 2</P></DIV>
<DIV class=spacer>
<DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100>
<P>caption 3</P></DIV>
<DIV class=spacer></DIV></DIV></DIV>

To Float Or Not To Float.. .. To Firefox Or To Ie That Is The Question!!!

Similar Tutorials

View Content

Hi all,

I have a bit of an odd situation (prob not odd if you seen it before but I have no clue why its doing it!).... I have my webpage:

http://www.houseofhawkins.com/index.html

which works great in IE. the part in question is the menu tabs at the top. Within IE they keep the width I have given them.. In firefox they only go to the width of the text.

They are links with the following CSS attached:

div#Header #MenuSection a.MenuTab {

PHP Code:
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#A8DBA8', startColorstr='#A4B7A4', gradientType='0');
    font-weight: bold;
    text-align: center;
    font-size: 1.3em;
    background-color: #BCD6BC;
    border-style: solid;
    border-width: 1px;
    border-color: #A5BEA5 #BCD6BC #BCD6BC #A5BEA5;
    margin: 0 5px 0 2px;
    height: 1.5em;
    width: 140px;
    padding: 5px 1px 1px 1px;
}

div#Header #MenuSection {
    float:left;
    margin-top: 30px;
}

here is the HTML code for that part of the page.

PHP Code:
<div ID="MenuSection">
                    <a Class="SelectedMenuTab" Title="You are currently viewing the Home page">Home</a>
                    <a Class="MenuTab" href="" title="Curriculum Vitae for Jonathan Hawkins, Author of House of Hawkins">CV</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/projects/index.html" title="Portfolio of Work created by Jon Hawkins">Portfolio</a>
                    <a Class="MenuTab" href="" title="Online Photo Gallery of Jon, friends and family">Photo Gallery</a>
                    <a Class="MenuTab" href="http://houseofhawkins.com/games.html" title="Games created by House of Hawkins">Games</a>
                </div>
            <div style="clear:left"> </div>

I just dont get why firefox wont be nice and give me the width I ask for... the oddest bit is if I put float:left into the menutab part they do work!

I wish to understand why its like this... I have attached the CSS and the file if that helps anyone.

Thanks for the help and advice.

Best Png 24 Solution For Ie 6 And Below

Similar Tutorials

View Content

What is the best solution for enabling IE 6 and below to be able to display PNG 24 images correctly? I've seen several workarounds on the Web and wondered which one that most people are using?

Just In Case There Is A Better Solution...

Similar Tutorials

View Content

Recently I started making my very first doctype=strict page and am trying to make it act the same way in IE and Firefox. After much time spent in research and experimentation I ditched tables in favor of DIVs cause 100% tends to be either too wide or too tall. The only good solution I could find is using javascript to calculate widths and heights. This is fine since the entire page is one big ajax playground.

So anyway, research says this is cause width/height percentages don't take padding and borders into consideration. Let's say I set an outer div to 100 pixels wide. Then I give it a 2 pixel padding on the left and right side. Then I give it a 1 pixel border on the left and right side. Then I add another DIV inside this container and set it to 100% width. For some reason, both IE and Firefox feels the need to calculate this as 106 pixels wide instead of 100 pixels. I'm not sure if the HTML standard says this has to be true, but I can find no justification for such a practice. I understand that they prefer that the 100 pixels apply to only the content - that padding and borders increase the width of the object. But I don't see why objects that are inside of that container would try to stretch wider than the content width.

I say all the above just in case there's something I'm missing and somebody would like to correct me.

So now for my question. Other than using javascript, is there a way to make sure that objects inside the container have the width of the container's content width rather than the container's actual width. Any answers must apply to the height as well, since I understand that there is a somewhat unreliable behavior (in my testing) where a DIV automatically takes up as much width as is available.