3 replies [Last post]
Webskater
Webskater's picture
Offline
newbie
Last seen: 5 years 21 weeks ago
Timezone: GMT+1
Joined: 2012-03-29
Posts: 2
Points: 3

Despite being a reasonably advanced .net web / Sql Server developer - I struggle with css. Something I can never get to work is how to duplicate this.

<table>
<tr>
<td rowspan="2">Left</td>
</tr>
<tr>
<td>Right Top</td>
<td>Right Bottom</td>
</tr>
</table>

How can you reproduce this using divs and css?

If I write, for example ...

<div style="float:left; height:100px;">Left</div>
<div style="float:left; height:50px">Right Top</div>

... that puts two divs horizontally next to each other, but how can I get ...
<div style="height:50px">Right Bottom</div>
... to sit below Right Top and to the right of Left?

Thanks for any help. If I could find out how to do this I would be able to use css layouts. As it is I nearly always start with a css layout and, after messing around for hours trying to get things where I want them, give up and go back to tables.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

If I understand correctly?

If I understand correctly? float:right; clear:both;

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Webskater
Webskater's picture
Offline
newbie
Last seen: 5 years 21 weeks ago
Timezone: GMT+1
Joined: 2012-03-29
Posts: 2
Points: 3

Thanks for your reply but it

Thanks for your reply but it doesn't do it.

That puts the Right Bottom div at the extreme right and below the Left Div and the Right Top div.

I want the Right Bottom div directly below the Right Top div with both of them to the right of the Left div.

This is the standard sort of thing I want to do within, say, a header div that might be 800px wide and 100 px high.

Within that header div I want:
A logo on the left - 100px high
A telephone number to the right of the logo
Some navigation links to the right of the logo - below the telephone number

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

So where does the bottom

So where does the bottom float end up?

The only reason it wouldn't be directly below the top right is if the parent width was greater than the two top floats in which case you might need a containing div that holds all these elements and has a stated width and float containment of some type so that the bottom float has a right edge to float up against.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me