Clear: Both Not Working Within Header Div?

HTML & CSS
1

Hey guys,

I suspect that the answer to this question is actually pretty straightforward and I’m just missing something obvious here but I can’t find the answer on W3 so I’m asking you guys.

Basically I’m trying to center an image beneath my logo and social media icons like this:

My strategy to do this was simple:

  1. Float logo left.

  2. Float social media icons right.

  3. Clear: Both

  4. Horizontal-Align: Center the image.

The only thing is, that didn’t work.

Currently, I am achieving the centered effect only in a makeshift fashion with the following HTML and CSS:

HTML:

<header id=“header”>
<img src=“logo.png” style=“margin-left: 10px; float: left;” /><
<div id=“rightnav”>
<ul>
<li><img src=“facebook.png” /></li>
<li><img src=“google.png” /></li>
<li><img src=“ebay.png” /></li>
<li><img src=“blogger.png” /></li>
<li><img src=“apple.png” /></li>
</ul>
</div>
<img src=“middle text.png” style="margin-left:80px; margin-top: 180px; clear: both; " />
</header>

CSS:

[I]#header {
background: url(‘top image.png’);
background-repeat: x;
height:378px;
}

#rightnav {
float: right;
}

#rightnav ul li {
display: inline;
}

#rightnav li {
margin: 10px;
}[/I]

This method relies on me “eye-balling” a width that is “roughly centered” and also requires a margin-top to keep the thing below the logo and icons. I feel there should be a way to do this with Clear: Both but I just can’t hack it.

2

{ clear: both; margin: auto; } doesn’t work?

3

Something like this will serve you better:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.head-wrap {overflow: hidden;}
.logo {float: left;}
header ul {float: right; list-style: none; margin: 0;}
header ul li {float: left;}
.img {text-align: center;}

</style>
</head>
<body>

<header>
<div class="head-wrap">
	<div class="logo">
		<img src="logo.png">
	</div>
	
	<ul>
		<li><img src="facebook.png"></li>
		<li><img src="google.png"></li>
		<li><img src="ebay.png"></li>
		<li><img src="blogger.png"></li>
		<li><img src="apple.png"></li>
	</ul>
</div>

<div class="img">
	<img src="middle.png">
</div>
</header>

</body>
</html>
4

Try putting text-align:center; in your header.

Just noticed Ralph applies text-align:center: image, will try when on the desktop.

5

just something ‘fun’ to consider:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">

 header {text-align:justify; background:pink; display:block; line-height: 0}
 header ul { list-style: none; margin: 0; outline:1px solid; padding:0;}
 header  img {min-height:50px;min-width:50px;   outline:1px solid red }
 header> img {min-width:150px;    }
 header ul, header img, header:after, header li { display:inline-block;vertical-align:top;}
 header:after{content:'';  height: 1px; width:80%;  }
 .mid {margin-top:50px}
 </style>
</head>
<body>

<header>
  <img src="logo.png" class="logo">
  <img class="mid" src="middle.png">
  <ul>
		<li><img src="facebook.png"></li>
		<li><img src="google.png"></li>
		<li><img src="ebay.png"></li>
		<li><img src="blogger.png"></li>
		<li><img src="apple.png"></li>
	</ul>
	</header>
 </body>
</html>
6

So, I was fiddling around with this project again and I got a solution that (to me at least) seems satisfactory.

What I did was ridiculously simple: I just wrapped a div around the IMG and then used {clear: both; margin: 0px auto;}

In hindsight it seems like a pretty easy solution, but it seems like adding piles and piles of divs like this is sort of cluttering up the style sheet.

Is there any reason why IMG doesn’t respond to clear:both the way a div does?

7

(I didn’t read the thread carefully, so this response addresses your last question in isolation.)

A div is a block object. Blocks respond to {margin:0 auto;} An image is an inline object. Inline objects can be centered by assigning {text-align:center} to their parent container (just like text is centered), OR by setting the img tag to {display:block;margin:0 auto;}.


[color=blue].parent {text-align:center}[/color]

<div class="parent">
    <img src="myimage.jpg" width="200" height="100" alt="">
</div>

-or-

[color=blue]img {display:block;margin:0 auto;}[/color]

    <img src="myimage.jpg" width="200" height="100" alt="">

The blue css would be located in the css section of your page or in an external style sheet.

Does this help or do you need working examples?

8

You would need to give the div a width otherwise margin:auto wont work on the div because the div will be full width and there’s nothing to centre. Or alternatively apply text-align:center to the div and that will centre inline children such as images and text

Is there any reason why IMG doesn’t respond to clear:both the way a div does?

‘clear’ only applies to block elements and not inline elements (which images are by default). The solution is simply to set your image to display:block and then use margin:auto and clear:both as already mentioned above. No need for extra divs

Working example (just copy paste and view while online).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
#header {
	background: red;
	background-repeat: x;
	height:378px;
}
#rightnav { float: right; }
#rightnav ul {margin:0;padding:0;list-style:none}
#rightnav ul li { display: inline; }
#rightnav li { margin: 10px; }
.mid {
	clear:both;
	display:block;
	margin:auto
}
</style>
</head>

<body>
<header id="header"> <img src="http://placehold.it/100x100" style="margin-left: 10px; float: left;" >
		<div id="rightnav">
				<ul>
						<li><img src="http://placehold.it/30x30" ></li>
						<li><img src="http://placehold.it/30x30" ></li>
						<li><img src="http://placehold.it/30x30" ></li>
						<li><img src="http://placehold.it/30x30" ></li>
						<li><img src="http://placehold.it/30x30" ></li>
				</ul>
		</div>
		<img class="mid" src="http://placehold.it/330x130" > </header>
</body>
</html>