Problems with floats

[Seven001]

I have been fighting with CSS all day long trying to get it to do what I want, to no avail. Basically, what I want the page to look like this (used tables to demonstrate):

http://sixpointnine.net/test/tables.html

I realize that I could have just went with the tables and moved on, but the whole point of this exercise is to familiarize myself with CSS. Something that has not gone all that well, which is the reason I'm now hoping someone can point out whatever mistake I have managed to overlook/not find the answer to for the past few hours. Anyway, here's what I've ended up with:

http://sixpointnine.net/test/index.html

The problem lies in trying to float the two images at the top, to opposite sides. I have tried so many ways to accomplish it, but all have failed. Many thanks to anyone that can shed some light on this for me.

[Erik J]

Play with this changes, its not the only solution.

.top {
float:left; /* added rule */
padding:0 10% 0 10%; /* was 0px */
width:80%; /* was 100%*/
border-bottom:2px solid #FF9900;
background:#666666;
}
 
span.left {
background-color:#000; /* added rule */
/*margin-left:10%;*/
/*margin-right:0px;*/
float:left;
text-align:left;
width:60%; /* matching span.right */
border-left:2px solid #FF9900;
}
 
span.right {
padding:30px 2% 25px 0; /* added rule */
margin-right:-4px; /* was 10%*/
/*margin-left:0px;*/
float:right;
text-align:right;
width:38%; /* matching the padding-right 2%*/
border-right:2px solid #FF9900;
background:#000000;
}
 
.mid {
margin-left:10%; /* was auto */
/*margin-right:auto;*/
width:80%;
height:100%;
background:#000000;
text-align:right;
border-left:2px solid #FF9900;
border-right:2px solid #FF9900;
}

Matching percentage not always adds up to the pixel.

[Seven001]

Excellent! It worked and I'm pretty sure I mostly understand what you've changed. Someone on another forum I'd posted this problem on replied with a different solution, which fixed it as well, but I like your solution better since you just modified what CSS I used and he mostly rewrote it (still nice of him of course). One question though, for learning purposes.. and I'd probably understand it better if my mind weren't groggy from just having woken. Why the -4px margin on the span.right class?

I'm glad I'm not going to have to resort to using tables. As tedious as CSS can be, I'd still rather just get used it and move forward.

Thanks again for the guidance.

[Erik J]

The -4px is to add up with the 2*2px borders.

[Seven001]

Ohhhh, that makes sense. I thought having a negative value there would cause it not to validate actually, but I was pleasantly surprised to see that it did. Thanks a lot for the help.

[Seven001]

Another question. The swatch.png image I'm using on that is really just a marker for now. I'm wanting to put 4 linked images the size of the small squares in that image, and in that formation. How can I go about that? I knew it wouldn't be as simple as just throwing them in there. I know that I can just use an image map to make different parts of the one image different links (something I've done before), and that might be the easiest way, but 1. for future reference I'd still like to know how to accomplish what I want to do with CSS, and 2. I'm wanting to put a little bit of text either above or below the image(s). Is what I'm wanting to do as simple as editing the margins and then using image tags and line breaks?

I'm going to play with it and research this via Google and such, but yesterday I struggled with the CSS code I had ALL day to no avail, so I figured I'd go ahead and ask for an answer to my specific question anyway (something Google can't always provide).

[Erik J]

I need to point out that I'm still a newbe to this.
I guess this design is mererly an excercise to translate table to css?

If you don't mind, I ask you to loose the table thinking; look at the present page as a designers mockup and you are the css-html-coder. Print it out if necessairy, make notes on it what is content and what is visual effects.
-Place content contained in the html elements they semanticly need.
-Think about the html element's properties, can they be used for the visual design. When needed give the elements id/classes according to their content.
-Only when necessairy add html elements for function and visual design.

I think your new questions need the html to be rewritten. Now use lists for the links. Use an element background-property for the logo.
Then the 4-linked image has different solutions. Best advised by an expert.

[Paul O'B]

I'm wanting to put 4 linked images the size of the small squares in that image, and in that formation.

You could do something like this.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0;padding:0}
ul.test{
    list-style:none;
    float:right;
    width:40px;
    height:40px;
}
.test li,
.test li a{
    width:17px;
    height:17px;
    float:left;
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    display:inline;
}
.test li {margin:0 3px 3px 0;}
.test li.a a{background:red;}
.test li.b a{background:blue;}
.test li.c a{background:green;}
.test li.d a{background:yellow;}

.test li.a a:hover{background:teal;}
.test li.b a:hover{background:orange;}
.test li.c a:hover{background:wheat;}
.test li.d a:hover{background:black;}

</style>
</head>
<body>
<ul class="test">
    <li class="a"><a href="#">a</a></li>
    <li class="b"><a href="#">b</a></li>
    <li class="c"><a href="#">c</a></li>
    <li class="d"><a href="#">d</a></li>
</ul>
</body>
</html>

If the image shapes are more complicated than add position:relative to the ul and than absolutely position each anchor (instead of floating) inside the ul at the exact position you need.

[Erik J]

Inspired by Paul and following his advice about positioning the 4-image-links I ended up with this example how to make css-html for this design.

<!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>CSS Exercise - Positioned Links</title>
<style type="text/css">
body,ul,li,p{margin:0;padding:0}  /* override different browser defaults */
body {
	text-align: center;        /* center the divs in IE5-6 */
	background: #999 url("body-top-bg.gif") repeat-x left top; /* 102px high, behind head, making top grey-orange line */
}
a {
	text-decoration: none;
	font-weight: bold;
	color: #FC0;
}
.head {
	margin-left: auto;         /* center the div in it's parent */
	margin-right: auto;
	width: 80%;
	height: 100px;
	border:0 solid #f90;       /* shorthand border, set all border to width and type and color */
	border-width: 0 2px 0 2px; /* shorthand border-width needs all sides values *//* change for IE5.5 box-model-bug; horizontal border moved to nav */
	background: #000 url("dumbylogo.png") no-repeat;
}
.head ul{
	display: inline;            /* fix for the double margin bug in IE5-6 */
	position: relative;         /*  give a reference for the absolute positioned links */
	float: right;
	margin-top: 30px;
	margin-right: 20px;
	width: 45px;
	height: 45px;
	background: url("swatch.png");/* (not given values are automaticly set to: transparent no-image repeat left top) */
}
.head ul li {
	float: right;                /* IE5-6 seems to need the float for the links to work, not sure why yet */
	list-style: none;
}
.head ul li a {
	position: absolute;         /* take all this links out of flow and position to values below */
 	text-indent: -999em;        /*  move the text out of sight but stay readable to screenreaders */
}
.head ul li a#tl {
	left: 0;                    /* (always give absolute positions horizontal and vertical values) */
	top: 0;
	width: 22px;                /* set the link area */
	height: 22px;
}
.head ul li a#tr {
	left: 23px;
	top: 0;
	width: 22px;
	height: 22px;
}
.head ul li a#bl {
	left: 0;
	top: 23px;
	width: 22px;
	height: 22px;
}
.head ul li a#br {
	left: 23px;
	top: 23px;
	width: 22px;
	height: 22px;
}
.head ul li a#tl:hover {
	background-color: #f90;
}
.head ul li a#tr:hover {
	background-color: #c00;
}
.head ul li a#bl:hover {
	background-color: #099;
}
.head ul li a#br:hover {
	background-color: #072;
}
.head p{
	display: inline;            /* fix for the double margin bug in IE5-6 */
	clear: right;              /* place the text under the floated image */
	float: right;
    /* margin-top: -70px;*/         /* e.g. use of neg margin if the text later needs to be moved above the 4-links-image */
	margin-right: 20px;
	color: #f90;
}
.nav {
	margin: 0 auto;
	width: 80%;
	height:1.4em;
	border: 2px solid #f90;        /* horizontal border here instead so IE5.5 box-model-bug doesn't move it up inside the box */
	border-bottom: 0;              /* leave all borders set above but the bottom */
	background: #000;
}
.nav ul {
	float: right;
	list-style: none;
}
.nav ul li {
	float: left;                /* to sort the items they are floated left within the ul */
}
.nav ul li a {
	line-height: 1.4em;
	margin-right: 20px;
}
</style>
</head>
<body>
	<div class="head">
		<ul>
			<li><a id="tl" href="#top-left" title="Link to Top-Left">Top-Left</a></li>
			<li><a id="tr" href="#top-right" title="Link to Top-Right">Top-Right</a></li>
			<li><a id="bl" href="#bottom-left" title="Link to Bottom-Left">Bottom-Left</a></li>
			<li><a id="br" href="#bottom-right" title="Link to Bottom-Right">Bottom-Right</a></li>
		</ul>
		<p>Text about the 4-link-image</p> <!-- changed from span according to Paul's advice about not place inline-element between block-elements -->
	</div>
	<div class="nav">
		<ul>
			<li><a href="#home">Home</a></li>
			<li><a href="#services">Services</a></li>
			<li><a href="#portfolio">Portfolio</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</div>
</body>
</html>

Tried to explain some in the comments. Mostly to myself, not that I think you need it.

[Paul O'B]

Good work Erik

Just one minor adjustment in that the span should really be a block level element as it is sitting between 2 block elements. (Of course CSS can style the block element to behave like a span but the html structure should be logical)

[Erik J]

Thanks. I'll try to remember that.

About the code in last post, I'm curious about what the proper alternative is and why:

.head ul li {
	/*display: inline; */          /* for IE, seems IE, with li as anonymous? block, the sensing of the link will go to the text and so move with text-indent */
 	float: right;                 /* second possible alternative for IE, makes the li shrink to content and sensing of link go to the link-area box */
	/* position: absolute;*/      /* third possible alternative for IE, same as for float */
	/* left: 0; */
	/* top: 0; */
	list-style: none;
}

[Paul O'B]

Hi Erik,

As the examples are all the same height and width then floating is an easy option. If for example some were bigger than others then floating wouldn't work so well because they would snag and absolute positioning would be a better option as it allows you to put the element exactly in its place and not restricted to the flow.

display:inline is not really suitable as you can't specify height and widths precisely for your elements and also introduces whitespace bugs that would mess up the positioning.

Hope that was what you meant

[Erik J]

Informative, but I'm still confused about IE behavior. The items contains the anchors but seems to also (in IE) control the mouse (didn't check focus) sensing of the anchor. I was surprised to find the display:inline affected that (only in all IE).

Edit) Probably not worth discussing, but it catched my interest a moment.
Edit) Clarification: In the code the anchors are out of flow by absolute positioning.

[Paul O'B]

HI Erik,

IE doesn't like it when you add padding to inline elements and will need position:relative added to make it behave. I think this may be what you were talking about

[Erik J]

Sorry I can't make a clear question. Thanks for the try to clarify how it works though.