CSS question.....

malef!c

malef!c

malef!c

Associate
Joined
27 Jun 2006
Posts
1,473
Bit of a noob when it comes to this CSS lark so trying to get into it for my own amusement.

However, I have hit a wall and can't really find out how to do 3 small boxes across the middle of a page, for example:

css.png


I can do 2 boxes using float: left, but how would you go about doing the three boxes (marked with red)?

Its probably so simple but for the life of me I don't know where to start.

Got some CSS books coming soon so hopefully that will help me out but in the short term any help appreciated!

M.
 
So I just say float left to all of them?
Not sure why I thought only 2 could be floated - me being a complete new boy to the CSS world probably didn't help.

I have seen a few different ways that people have done the 3 box trick (1 used <ul> tags to spread the boxes across which really made my head spin!)

I will have to go play again!

Cheers
M.
 
BigglesPiP said:
Just float them all left, and use <span> instead of <div> if you can.
Click to expand...

You use a div to define a block if there's no other way to do it. span is just for marking up small chunks of text. Divs are display: block, span is display: inline.

You can float as much as you like provided there is room to do it :)

You may need to clear: both afterwards depending on your layout tho.
 
Pretty simple really, anymore than 3 divs I use a table (people seem to refuse to use tables nowadays for some reason) but to get 3 like you say is easy enough, and floating them all left is not ideal as they will wrap in some browsers.

Wrap the 2 left divs in a float:left div, and then float:right the third one. So like:

<div style="float:left">
<div style="float:left">BOX 1</div>
<div style="float:right">BOX 2</div>
</div>
<div style="float:right">BOX 3</div>

That entire chunk above should be wrapped in a float:left div too, to keep it sseperate from any other divs you may have.
 
Yeah floating all is not the best so do it like the post above or you can have a central div and float the other two left and right respectively in the space vacated by the margin of the central div.
 
Cheers all for the help - my books arrived as well today, so with the help here and the books I should be starting to understand soon!!

M.
 
keogh said:
Pretty simple really, anymore than 3 divs I use a table (people seem to refuse to use tables nowadays for some reason) but to get 3 like you say is easy enough, and floating them all left is not ideal as they will wrap in some browsers.

Wrap the 2 left divs in a float:left div, and then float:right the third one. So like:

<div style="float:left">
<div style="float:left">BOX 1</div>
<div style="float:right">BOX 2</div>
</div>
<div style="float:right">BOX 3</div>

That entire chunk above should be wrapped in a float:left div too, to keep it sseperate from any other divs you may have.
Click to expand...

Ugh, browser nightmare with that may divs.
 
BigglesPiP said:
Ugh, browser nightmare with that may divs.
Click to expand...

Netscape 4 maybe, other than that no, Never had a problem with that at all, and I test on all modern browsers.

If your not happy with that, then you HAVE to use tables, you can't float all left and using ul is madness for that.
 
keogh said:
Pretty simple really, anymore than 3 divs I use a table (people seem to refuse to use tables nowadays for some reason)
Click to expand...
That'll be because you're laying out page elements - tables should only be used for tabular data, not for general positioning.

but to get 3 like you say is easy enough, and floating them all left is not ideal as they will wrap in some browsers.
Click to expand...
It depends what kind of style you're going for, if you're happy with fixed width then you can wrap them in a container div and set a width on that, then the left-floated divs inside won't wrap.

Code: 
#itemContainer {
  width: 500px;
  margin: 0 auto;
}

.anItem {
  float: left;
  width: 130px;
  margin: 10px;
}

..snip..


<div id="itemContainer">
  <div class="anItem">
  </div>
  <div class="anItem">
  </div>
  <div class="anItem">
   </div>
</div>
Wrap the 2 left divs in a float:left div, and then float:right the third one. So like:

<div style="float:left">
<div style="float:left">BOX 1</div>
<div style="float:right">BOX 2</div>
</div>
<div style="float:right">BOX 3</div>

That entire chunk above should be wrapped in a float:left div too, to keep it sseperate from any other divs you may have.
Click to expand...
Keogh, I'm assuming you've put inline styling here because it's just a quick example, but it might be worth leaving a little note that it's not the ideal way to do it so that people aren't learning bad habbits.

PS - the best way would be to name them after what they are rather than what they look like, i.e. class="newsItem" or something like that; then when you decide to re-design your page the html can stay as it is and still make sense.

EDIT - I've rejigged the example as above.
 
Last edited:
Totally agree with LazyManc, semantic markup is the way to go. Also minimal code if you can help it. i.e. a <hX> tag is a block element anyways so you don't usually have to slap a div around it to do anything to it.

Keep the presentation separate from the markup, that way should you need to change a page design you can probably do it just by changing the stylesheet.
 
Not much hope for me really is there - trying CSS when I can't even get a link right ;)
Got a couple of days off work so will be tucking into the books this morning and see what a design god I can turn into (or probably not!)

Cheers again to everyone for the help!
M.
 
You must log in or register to reply here.
Back
Top Bottom