css div boxes
If I make a code like this
<div class="whatever">whatever</div>
<div class="whatever">whatever</div>
<div class="whatever">whatever</div>
<div class="whatever">whatever</div>Then (if display: block) you'll end up with 4 boxes verically stacked without even having tags. Okay fine, but how can I make my div boxes side by side horizontally? What I'm doing is reverting to using a table with class tags for each but how can you do this without the table?
Thanks
AyntRyte posted this at 05:00 — 27th January 2005.
He has: 145 posts
Joined: Jun 2004
Try this?
<div style="float:left; border: black solid 1px; padding:5px">whatever</div><div style="float:left; border: black solid 1px; padding:5px">whatever</div>
<div style="float:left; border: black solid 1px; padding:5px">whatever</div>
<div style="float:left; border: black solid 1px; padding:5px">whatever</div>
\\// Robert
The grass is always greener on the other side -- but that's because they use more manure.
Renegade posted this at 09:31 — 27th January 2005.
He has: 3,022 posts
Joined: Oct 2002
Or, you can give it a width and make it display:inline;
fifeclub posted this at 04:24 — 28th January 2005.
He has: 688 posts
Joined: Feb 2001
That was easy. Thanks!
fifeclub posted this at 05:45 — 28th January 2005.
He has: 688 posts
Joined: Feb 2001
DIFFERENT QUESTION:
I don't want to clog up the forums with lots of threads so I'm going to ask another (yet different) css question here. I used the code above here to make the vertical boxes which worked great. All of that code is contained in an overall content container div, appropriately named "container". Now I want to center my container div but I just discovered that XHTML does not support .
So seperately I tried the css code of text-align:center and the html code of align="center". Both solutions (either together as they are now or seperately) work fine in Internet Explorer but not in Firefox. :eek: (Isn't it usually that things work in FF but not IE) Anyway, since I can't use and the two workarounds don't work in FF, what else can I do to center my container div and still validate, or any content that I may need to center in the future?
Thanks yet again.
andy206uk posted this at 09:15 — 28th January 2005.
He has: 1,758 posts
Joined: Jul 2002
To center things in IE you have to use "text-align: center" applied to the surrounding div or if it's the outer most div, on the body tag. This is another one of those "ie not working properly things". To center in standards compliant browsers you set the left and right margin's to "auto".
Using inline styles (yuk!) here's an example that should work across the board:
<body style="text-align: center;"><div style="margin: 0 auto 0 auto;"><p>Content</p></div>
</body>
Please note, if you set the outer element to text-align: center the effect with cascade and effect the inner element as well, so you need to add text-align: left to the inner div to correct that.
Andy
fifeclub posted this at 04:29 — 9th February 2005.
He has: 688 posts
Joined: Feb 2001
Sorry to bring back an old thread but I'm still having this centering issue, but with a different section. Your solution seemed to work on my previous issue but now I'm just tying to center a plain simple image.
On this page I'm just trying to center the drawing image of homes at the bottom. At first I did it inline but then I tried making the css external so that I can use it over and over again. I've tried just one, then just the other, now both and nothing works in either IE or FF.
.center {text-align: center; margin: 0 auto 0 auto;}'<img src="/development/graphics/drawing.jpg" width="600" height="125" alt="" class="center" />'AyntRyte posted this at 13:16 — 28th January 2005.
He has: 145 posts
Joined: Jun 2004
I must admit to a boo-boo in my code above. Class must be used instead of ID, as ID is unique and can only be used once. :blush:
Renegade posted this at 10:56 — 9th February 2005.
He has: 3,022 posts
Joined: Oct 2002
add display:block; to .center
fifeclub posted this at 04:25 — 10th February 2005.
He has: 688 posts
Joined: Feb 2001
that did it. awesome awesome awesome! Thanks yet again.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.