The importance of ordering the elements in HTML

content VS presentation

[tata668]

Let's say I have 4 elements to display horizontally in the top section of my page:

[ELEMENT 1] [ELEMENT 2] [ELEMENT 3] [ELEMENT 4]

And let's say their logical order is really 1-2-3-4. It can't be 2-1-4-3 for example, it wouldn't be correct.

Now, lets say I want to align them to the right of my top section. Each element is a div, so I though about floating them to the right, inside the "top" div.

For them to be in the correct order (1-2-3-4) I needed to place them in the *reverse order* in my html! Indeed, [4] should be float:right before [3], [3] before [2] and [2] before [1].

What is sad about that is:

1) CSS should be about separing content and presentation, right? Now this is a simple example where I have to change my content to change its presentation (if I want to float the elements)

2) Users using a text-only browser will see my elements in *the wrong order*!

Any though, trick, idea?
Am I missing something?

[tata668]

Thanks for that long explanation doodlebee!

But just to be clear, I'm not trying to vertical-align:middle the link, I'm just trying to give it some padding-top or margin-top. Like "margin-top:3px" or so..

I've tried removing the img {vertical-align:bottom;} but I'm still not able to play with the padding or margin of the link!

For example, I'm pretty sure this part of your code:

a, a:link, a:visited {
padding-top:5px;
}

has no effect at all. When I remove it, the display doesn't change.

That's what I mean when I say I want the 4 element to be horizontally aligned but I also want to be able to vertically move them when they are in place (not vertical-align:middle, just giving them some margin-top or padding-top).

This is why I though the way to go was to insert the elements into divs.. And then float the divs. But then we're back to msg #10! :-P

And for the "display:table-cell" trick, I can't. I need IE 5+ to work. But thanks for the tip...

[doodlebee]

That's what I mean when I say I want the 4 element to be horizontally aligned but I also want to be able to vertically move them when they are in place (not vertical-align:middle, just giving them some margin-top or padding-top).

Then give #box your margin and/or padding. All the elements are aligned in #box, so if you do it to #box, it will apply it to *all* elements within it.

Or, alternatively, you can give #header the padding and it'll move #box down.

[tata668]

Then give #box your margin and/or padding. All the elements are aligned in #box, so if you do it to #box, it will apply it to *all* elements within it.

Or, alternatively, you can give #header the padding and it'll move #box down.

But let's say I only want to move the link from the top of #box (margin-top:3px), not all four elements.

[willybfriendly]

.right
{
float:right;
}
.left
{
float:left;
line-height:2em;
vertical-align:middle;
}

<div class="right">
<img src="test.jpg" height="26" class="left"" width="27">
<a class="left" href="">Link Text</a>
<img src="test.jpg" height="26" class="left" width="27">
<form action="" class="left"><select></select></form>
</div>

Just style the elements. If you want to play with the link, style it.

a.left
{
float:left;
padding: x,x,x,x; /*can use line-height, margin, etc. Whatever meets your needs*/
}

If you dan't want it flusch against the right side, pad the .right div.

(I didn't test this in Opera or Firefox, but it is pretty straight forward, so it should work.)

WBF

[tata668]

(I didn't test this in Opera or Firefox, but it is pretty straight forward, so it should work.)

Nope, doesn't work in Opera. Exactly the same problem than msg #10: you have to zoom in or zoom out for the elements to be horizontally aligned!

But thanks anyway.

[willybfriendly]

This seems to work in Opera 8.5

.right
{
float:right;
min-width:20%;
}
.left
{
float:left;
line-height:2em;
vertical-align:middle;
}

This appears to me to be an Opera bug. The div appears to be setting its width to the width of the first image on the first rendering.

Opera seldom show this kind of wierd behavior. Pretty odd. Reminds me of the peek-a-boo bug in IE.

WBF

[tata668]

Using "min-width:20%" seems to solve the problem but in fact it isn't because you have to choose a % that will be width enough for the 4 elements. And, like I said earlier, I don't know the width of my elements before displaying them.

[doodlebee]

Using "min-width:20%" seems to solve the problem but in fact it isn't because you have to choose a % that will be width enough for the 4 elements.

Kinda, but not really.

Using the "min-width" property says to "make the div a minimum width of 20%". Which means if the content is *less* than 20%, then the width will remain at 20%. If the content ends up being *wider* than 20%, then the div will expand to make the contents fit.

FOr IE - you have to use a conditional comment to set the width at 20% (width:20%) because it doesn't understand "min-width" - but it acts the same. If it's less, it'll stay at 20% - if it's more, it'll expand to make it fit.

So in using that, you don't *have* to know the width of anything. All you have to be concerned about is the *minimum* width you're willing to accept for your layout. Otherwise, it'll get bigger if it needs to.

[tata668]

The problem is, for the Opera bug to disappear, the min-width has to be width enough to hold all four elements horizontally! Thus, you need to know the width of the elements.

Otherwise you could just say min-width:1%; and everything would be fine.

[willybfriendly]

Otherwise you could just say min-width:1%; and everything would be fine.

Or, (again, I have not tested) does min-width simply have to be larger than the first element?

As I said before, at first glance it looks like Opera is trying to set the div width to the first element. I used the 20% pretty randomly.

Have you reported this bug? Or, searched to see if it is a bug, and if so if others have found work arounds?

We know just enough about your layout to get frustrated trying to fix it.

WBF

[tata668]

Or, (again, I have not tested) does min-width simply have to be larger than the first element?

min-width has to be the width of all four elements if you want all of them to be horizontally aligned. If min-width is only the width of the first two elements, only those two elements will be on the first "line". (tested, Opera 8.5 build 7700, Windows XP).

Have you reported this bug? Or, searched to see if it is a bug, and if so if others have found work arounds?

Not really.. Maybe if I have some time one day.

I know some of you will think it's lame but I've decided to use a table there. It works like a charm.