Layout: Float problems.

started by Kaa on Apr 22, 2004 — RSS Feed

Kaa Kaa
Posts: 10

Hello there. This was the first time I've done any CSS before but I think I'm getting the hang of it, kind of

Basically I'm just trying out a few layout ideas and I tried using floats for placement. Here's the html of it:

[pre]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css" media="screen"></style><!--
body {
     font-family: Verdana, Geneva, Arial, sans-serif;
     color: #565f55;
     background-color: #e8eae8; }
     
#page {
     margin-top: 10px;
     overflow: auto;
     font-size: 11px;
     line-height: 14px;
     background-color: #d5d5de;
     text-align: center;
     visibility: visible;
     margin-right: auto;
     margin-left: auto;
     position: relative;
     width: 600px;
     padding: 5px;
     z-index: 1 }
     
#logo {
     background-color: #FFB108;
     float: left;
     position: relative;
     width: 130px;
     height: 130px;
     z-index: 3 }

#cover {
     background-color: #DDFFDD;
     float: right;
     position: relative;
     width: 465px;
     height: 130px;
     z-index: 2 }

#menu {
     background-color: #669A8E;
     position: relative;
     width: 100%;
     height: 20px;
     z-index: 2 }

#content {
     background-color: #D1E4C9;
     float: left;
     position: relative;
     top: 3px;
     width: 445px;
     height: 100%;
     z-index: 2 }
     
#sidebar-right {
     background-color: #D1E4C9;
     float: right;
     position: relative;
     top: 3px;
     width: 152px;
     height: 100%;
     z-index: 2 }


--></style>

     
     <title>test layout</title>
</head>

<body>
     <div align="center">
           <div id="page">
                 <div id="logo">logo</div>
                 <div id="cover">cover</div>
                 <div id="menu">MENU</div>
                 <div id="content">
                       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non ipsum a nisl lacinia pulvinar.
Proin accumsan. Maecenas id odio. Praesent dictum. Cras malesuada. Aenean blandit vehicula diam. Phasellus feugiat fringilla pede.
Suspendisse tempor nunc in dolor. Quisque lorem ipsum, venenatis quis, interdum vel, mattis nec, lacus. Aliquam erat volutpat.
Morbi ut enim. Quisque tristique quam id risus. Curabitur vel quam sit amet purus viverra dapibus. Ut at lectus. Aliquam malesuada est
eget sapien. Aliquam volutpat tortor non odio. Vestibulum dapibus velit a dui facilisis vulputate. Nullam placerat. Maecenas dignissim
vestibulum sapien. Pellentesque pede ligula, congue at, scelerisque eu, imperdiet sit amet, tellus.
                       </p>
                 </div>
                 <div id="sidebar-right">sidebar</div>
                 <div>copyright rubbish</div>
           </div>
     </div>
</body>
</html>
[/pre]

This almost works perfectly in internet explorer (apart from the sidebar not being the same size as the content box).

In Opera the sidebar problem is there and the menu bar seems to stick to the top of the page.

In firefox the page looks awful, although the dimentions of the boxes seem to be correct (even the sidebar was renered as it should have been, which is nice).

Your help would be much appreciated, thanks.

Baxter Baxter
Posts: 157

Couple of things:

Floats must come BEFORE the stuff they're floating next to. So sidebar right must come before the other stuff.

You've assigned several things a z-index of 2, which is basically asking them to occupy the same space. Probably not your problem, but not really something you want to do, either.

The misized boxes sound like an IE  box model problem.

Kaa Kaa
Posts: 10

Thanks for the help baxter. Seemed to have fixed a few things. But I have a whole new problem now  :

The problem I have is that I have two columns side by side, One for content and one for other stuff (like polls and things) and I wish to have them the same height. Their height depends on their contents, but I want both columns to adapt to the column with the larger content.

So what I want is to make the right column the same height as the left column. Usually (but not always) the content of the left column is taller than the right.

And also I want the whole page to be in one giant box,  which adapts to the size of the content.

I'm banging my head against the wall trying to figure out how to do this, I'm sure I'm going to kick myself when I find out how it's done.

I know I could use an HTML table to do this, but that's what I'm trying to escape with css (*rembers using invisible gifs for layout  *)

Joe Gillespie Joe Gillespie
Posts: 528

I'm not sure what you mean by two columns the same height. The only way you can get two columns of text the same height is to put the same text in them. There's no concept of column-flow in HTML or CSS so the bottom edge of any text will be at an arbitary position depending on the number of words and text size.

http://www.wpdfd.com/editorial/wpd0403b.htm#feature shows how I turned WPDFD from a table-based to CSS-based layout with two columns - actually, there are three but one is only for the section headers.

The is an overall div for the whole page which is a fixed width but says centred on the window because the margins are set to auto. You can do the opposite, fix the margins and make the div stretch if you like.

If you put two 'float: left' coumns inside that with their witdths set to 50%, you will get the fluid two column layout.

To get text to line up in left and right columns, I break the columns up into shorter ones with a full width 'spacer' div that gives a new top for each pair of columns. The diagram should be self explanitory.

To provide the illusion of the left and right columns being the same height, you can put a footer at the bottom (or one on each side like I do on the WPDFD home page. That way, you get white space making up the difference in column lengths.

Kaa Kaa
Posts: 10

Thanks for the reply, it wasn't quite what I was getting at but I did learn something from it at least, I didn't know you could center elements by setting margins to auto, I had previously been wrapping a div around everything and setting align to center, so I'll try using this new method.

Hmm... I guess the best way to explain what I'm on about is to use a drawing:


(gotta love MS paint ;D)

It's probably not possible to make an element's height behave like that, but is there a way to at least make it  look like this?

Thanks in advance.

(by the way, I decided to scrap the code I made at the  begining of this thread, I've made a new version at http://www.boomspeed.com/houseofbobat/template.html, now it works in all the main browsers... I think)

Joe Gillespie Joe Gillespie
Posts: 528

As far as I can see, you only have a problem if the columns have background colours. If you leave one of the columns with a transparent background, then you can't tell that they aren't the same height.

Realistically, the only way to get what you are after is with tables but if that's what you want, then use a table, it can still be valid, it's not a crime! Some designs still require the use of tables and certain functions, such as valign="center" or valign="bottom" are still not easily achievable in CSS.

Kaa Kaa
Posts: 10

Yeah, I thought I'd might have to use a table to get that effect. Although I could experiment with that idea of transparent backgrounds and have the content and the sidebar in one giant "block" or something. Thanks for the help anyways.

Kaa Kaa
Posts: 10

Hang on, I think I've actually done it!

What I did was make a div element wrap around both columns and give it the colour of the background I wanted for both columns. Then for the content column I set the border-right to the same colour as the background colour. And I made the sidebar transparent (as you suggested).

The result is the illusion that there are two separate columns which are the same height. I've put it up here: http://www.boomspeed.com/houseofbobat/template.html

The only way I can see this method failing is if I want to make the columns a different colour.

Either way, I've managed to do it, thanks for the help guys!  ;D

Joe Gillespie Joe Gillespie
Posts: 528

To make the right column a diffent colour, you can use a background image for the wrapper div. Just a sliver of a GIF with two colours the correct width and set to repeat-y would do the trick.

Kaa Kaa
Posts: 10

Ah excellent, looks like I've managed to get the layout I wanted. I'm beginning to like all this css now. Thank you for the help everyone.

Baxter Baxter
Posts: 157

Yes, putting a background for BOTH columns on the background wrapper div is probably the most common, and easiest way, to get full-height columns. There's also some neat solutions that use a clearing element (say, <br style="clear:both" /> to do it, but they're a little harder to wrap the old bean around.

Jason_stanfill Jason_stanfill
Posts: 1

the background image is a great solution and is described more at A List Apart http://www.alistapart.com/articles/fauxcolumns/

Maskodok Eko Maskodok Eko
Posts: 171

the background image is a great solution and is described more at A List Apart http://www.alistapart.com/articles/fauxcolumns/
TOP SEO | Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

You must login to reply