Image Floats and General layout help needed.

**shaparis** · May 11, 2005 09:26

Hi there,

I am working on a site- just getting started. Still fairly new to CSS- just keep hacking away at it. Iam trying to take one element on the page at a time- i am now on images.

It is a corporate site, so i have the homepage, left column with items like press releases, in the news, and events. I have press releases working okay, now i am trying to work on the In the News section, with images and text that are stacked. I seem to get varying results on IE, FireFox and Opera- and i am not sure what I am doing.

I am trying to build it simply so that each section has it's own div, but i want the spacing beween each section to the be the same. iam not sure if i am explaing well, and I dont know the best way to show you my work so far. I have it here:

the site

Thanks!
sha
CSS Code

Code:

BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #c0c0c0 left top; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#page {
	MARGIN: 0px auto;
	WIDTH: 750px;
	BACKGROUND-COLOR: #ffffff;
	padding: 0px;
}
#footer {
	FONT-SIZE: 9px;
	WIDTH: 750px;
	COLOR: #666666;
	LINE-HEIGHT: 14px;
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
	TEXT-ALIGN: center;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;
	padding-top: 10px;
	padding-bottom: 10px;
}
#content {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 20px;
	MARGIN: 0px auto;
	WIDTH: 750px;
	PADDING-TOP: 0px;
	background-color: #FFFFFF;
	border: 8px solid #FFFFFF;
}
#maincontent {
	FLOAT: right;
	FONT: 12px/17px Georgia, "Times New Roman", Times, serif;
	VERTICAL-ALIGN: baseline;
	WIDTH: 530px;
	COLOR: #666666;
	TEXT-ALIGN: left;
	padding-right: 20px;
	padding-left: 5px;
	background-color: #FFFFFF;
}
div#sidebar {
	FLOAT: left;
	FONT: 10px Verdana, Arial, Helvetica, sans-serif;
	WIDTH: 180px;
	COLOR: #666666;
	TEXT-ALIGN: left;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #FFFFFF;
}

#sidebar H1 {
	FONT-SIZE: 12px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-variant: normal;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #C5B998;
	line-height: 1.6em;
	color: #0066CC;
	letter-spacing: 0.1em;
	padding-left: 2px;
}

#sidebar A:link {
	COLOR: #0066CC;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#sidebar A:visited {
	COLOR: #0066CC;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#sidebar A:active {
	COLOR: #0066CC;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}

#sidebar A:hover {
	COLOR: #CC0033;
	text-decoration: underline;
}

.clear {
	CLEAR: both;
	padding-top: 1px;
	padding-bottom: 1px;
}
#logo A {
	FONT-SIZE: 1px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}

div#navcontainer
{
background-color: #CC9900;
border-top: 1px solid #FFFFFF;
}

div#navcontainer ul
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: white;
	text-align: left;
	margin: 0;
	padding-bottom: 5px;
	padding-top: 5px;
	font-size: 11px;
	font-variant: small-caps;
}

div#navcontainer ul li
{
display: inline;
margin-left: -4px;
}

div#navcontainer ul li a
{
padding: 5px 10px 5px 10px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}

div#navcontainer ul li a:hover
{
background-color: #16008D;
color: white;
}

#active a { border-left: 1px solid #fff; }

#banner {
	BACKGROUND-IMAGE: url(images/splash_set_f02.jpg); WIDTH: 750px; HEIGHT: 136px
}

A:link {
	COLOR: #0066cc
}
A:visited {
	COLOR: #0066cc
}
A:active {
	COLOR: #0066cc
}
A:hover {
	COLOR: #0066cc; TEXT-DECORATION: none
}
H1 {
	FONT: 24px/24px Georgia, "Times New Roman", Times, serif; VERTICAL-ALIGN: baseline; COLOR: #a14117; TEXT-ALIGN: left
}
#sidebar UL {
	PADDING-LEFT: 0px; MARGIN: 0px; LIST-STYLE-TYPE: none
}
#sidebar UL LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 17px; FONT-SIZE: 11px; BACKGROUND: url(images/0029_doc.png) no-repeat 0px 2px; PADDING-BOTTOM: 8px; COLOR: #000033; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
#pressrelease {
	padding: 0px 4px;
	border: 1px solid #CCCCCC;
	width: 170px;
	height: auto;
	margin-bottom: 20px;
}
#pressrelease UL {

	PADDING-LEFT: 0px; MARGIN: 0px; LIST-STYLE-TYPE: none
}
#pressrelease UL LI {

	PADDING-RIGHT: 0px; PADDING-LEFT: 17px; FONT-SIZE: 11px; BACKGROUND: url(images/0029_doc.png) no-repeat 0px 2px; PADDING-BOTTOM: 8px; COLOR: #000033; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
#pressrelease H1 {

	FONT-SIZE: 12px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-variant: normal;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #C5B998;
	line-height: 1.6em;
	color: #0066CC;
	letter-spacing: 0.1em;
	padding-left: 2px;
}
#news {
	width: 170px;
	padding: 0px 4px;
	border: 1px solid #CCCCCC;
	height: 190px;
	margin-bottom: 20px;
}
#news H1 {


	FONT-SIZE: 12px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-variant: normal;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #C5B998;
	line-height: 1.6em;
	color: #CC0000;
	letter-spacing: 0.1em;
	padding-left: 2px;
}

.floatimgleft {
	BACKGROUND: #ffffff;
	FLOAT: left;
	MARGIN: 3px 8px 4px 0px;
	padding: 3px;
	border: 1px solid #CCCC99;
	clear: left;
}

.floatimgleft:hover   {
	BACKGROUND: #ffffff;
	FLOAT: left;
	MARGIN: 3px 8px 4px 0px;
	padding: 3px;
	border: 1px solid #CC6600;
	clear: both;
}

#events {
	width: 170px;
	padding: 0px 4px;
	border: 1px solid #CCCCCC;
	height: auto;
}
#events H1 {

	FONT-SIZE: 12px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-variant: normal;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #C5B998;
	line-height: 1.6em;
	color: #009933;
	letter-spacing: 0.1em;
	padding-left: 2px;
}

HTML Code

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<link href="screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">

<div id="logo"><a class="imagelink" title="Home Page" 
href="http://www.eschergroup.com/"><img 
src="images/PLA-443_Logo.gif" 
alt="Welcome to Escher Group." width="750" height="76" 
border="0" /></a></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">About Us</a></li>
<li><a href="#">In the News</a></li>
<li><a href="#">Our Customers</a></li>
<li><a href="#">Products & Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="banner"></div>
<div class="clear"></div>

<div id="maincontent"></div>

<div id="sidebar">
  <DIV id="pressrelease">
    <h1>Press Releases</h1>
    <ul>
      <li><a href="#">Escher Group welcomes Elmar Toime as Consultant</a></li>
      <li><a href="#">Escher Group Announces New IBM Center of Excellence will Feature WebRiposte™ Products</a></li>
      <li><a href="#">Escher Group selected by Postkantoren for Counter Automation Project</a></li>
      <li><a href="#">Escher Group and IBM Win Postal Counter Automation Project in Norway</a></li>
    </ul>
  </div>

  <div id="news">
    <h1>In the News</h1>
    <p><IMG src="images/homepage_postaltech0312.gif" alt="Postal Technology" class=floatimgleft /><a href="#">Escher Group featured in
     Postal Technology article (1349Kb)</a></p><br />
    <p><IMG src="images/InsightV4_2_homepage.gif" alt="Postal Technology" width="38" height="52" class=floatimgleft />
	<a href="#">Read the latest issue of Insight</a> </p>
  </div>


  <div id="events">
    <h1>Events</h1>
    <p><a href="#"><IMG src="images/event_userconference.gif" alt="User Conference 2005" border="0" class=floatimgleft /></a><a href="#">User Conference 2005. Deatils to come. </a></p>

    <p><IMG src="images/event_pe2005.jpg" alt="Post Expo 2005" width="60" height="60" class=floatimgleft /><a href="#">Post Expo 2005 This year’s Post-Expo will be held October 3 – 5 at the Paris Nord exhibition center in Paris, France.</a></p>
</div>


<DIV id=thumbnails>
  <p>&nbsp; </p>
  <p>&nbsp;</p>
  <p>&nbsp;                </p>
</DIV>


</div>

<div class="clear"></div>
<div id="footer">
<p>© 2005 Escher Group Limited. All rights reserved. <a href="#">Legal</a></p> 
<p><a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">In the News</a> | <a href="#">Our Customers</a> | <a href="#">Products & Services</a> | <a href="#">Support</a> | <a href="#">Contact</a> </p>
</div>

</div></DIV>
</body></html>

**Kravvitz** · May 11, 2005 11:40

You seem to have run into the issue of IE/Win wrongly expanding containers of floated elements to completely contain the floats.

**shaparis** · May 11, 2005 11:42

Not sure what you mean, a little more detail for a newbie

what do i need to do to fix that?

thanks!
sha

**shaparis** · May 11, 2005 14:23

Not sure what you mean, a little more detail for a newbie what do i need to do to fix that?

thanks!
sha

**Kravvitz** · May 11, 2005 14:39

This shows how floats are supposed to work, which is not how they work in IE.

You could pay a few dollars to read Big John and Holly's articles on this.

**shaparis** · May 11, 2005 14:45

would i do better to place it in a list?

**Paul O'B** · May 11, 2005 14:49

Hi,

Floats are renmoved from the flow and will stick out of their parent container if not contained. This is what mozilla does but ie doesn't. If you want the images and the text to clear the items above then you will need to set the p to :clear:both so that it starts on a new line.

e.g.

Code:

#events p {clear:both}

**shaparis** · May 11, 2005 14:55

that seemed to take care some of it...

but- i dod notice that on IE there looks to be too much space between each event item- yet on FireFox it looks better- is there anyway to get it to look consistent on all browsers?

thanks!

-sha

**shaparis** · May 11, 2005 17:42

is there a hack for ie- so things will look consistent across all browsers?

thanks!
sha

**Kravvitz** · May 11, 2005 20:07

You can use the clear property to make other browsers act like IE, but I don't know of any way to make IE handle floats properly.

You can change the margins and padding and if neccasary use filters to give IE some relative positioning to make things look the same.

**BluDragon** · May 11, 2005 23:27

An observation I made about your CSS is that everything is capitalized. It's better not to do that because if I am correct uppercase is not valid. Use lowercase instead.

**Kravvitz** · May 11, 2005 23:29

Yes, when using XHTML, CSS should be lowercase.

**BluDragon** · May 11, 2005 23:35

Originally Posted by Kravvitz

Yes, when using XHTML, CSS should be lowercase.

Precisely what I meant. Even if you aren't using XHTML, it's still a good idea to be ready for the future...

**Paul O'B** · May 12, 2005 00:37

i dod notice that on IE there looks to be too much space between each event item- yet on FireFox it looks better- is there anyway to get it to look consistent on all browsers?

If you are talking about the default spacing that is applied to elements then you need to explicitly control the padding and margins of those elements.

These days I usually use the universal selector(*) to set all paading and margins tozero right at the top of the stylesheet.

Code:

* {margin:0;padding:0}

That will set all browsers to the same zero defaults and then you can apply the exact padding and margins that you require for consistent results. Remember that lists need a left padding (or margin) in order for the bullets to appear so you also need to set that manually when using the method above.

If your question is about bugs with floats then the faq has large entry on floats that covers nearly all their misbehaviours and show you how to fix them. I have no troubles with floats and once you know the little bugs and behaviors they work well and consistently.

**shaparis** · May 12, 2005 02:28

thanks to everyone for your comments and help- i keep working on it- i am sure i will be back!

thanks!
sha

User Tag List

Thread: Image Floats and General layout help needed.

Thread Tools

Display

Image Floats and General layout help needed.

Bookmarks

Bookmarks

Posting Permissions