Forum Moderators: not2easy
I have 3 text blurbs that i would like to position side be side.
Here's some example code:
<div style="">
<div>3 blah blah blah </div>
<div>2 blah blah blah </div>
<div>1 blah blah blah </div>
</div>
I want this to appear as
3 blah blah blah 2 blah blah blah 1 blah blah blah
instead of
3 blah blah blah
2 blah blah blah
1 blah blah blah
Am I headed in the right direction? What's the solution?
Thanks for any help!
display: inlinedisplay:inline-blockAnother approach (much used) is to float the inner divs.
I'm a bit hesitant to say you're in the right direction. Use <div>s sparingly, you can style any element. Use those that make the most sense should there be no stylesheet (e.g. screen readers "see" it without the stylesheet ...
(note the standard says inline is default but browsers give div a block property)
I guess the browsers internal stylesheet will define block-level elements as
display:block. If not then it defaults to
display:inline?
<div>
<div>1 blah blah <br> blah blah blah </div>
<div>2 blah blah <br> blah blah blah </div>
<div>3 blah blah <br> blah blah blah </div>
</div>
I would like each chunk/div to be next to each other. This entire dive is inside a <center> tag too =/
float:left;width:150px;
display:inline-blockSo floating it will be a good solution, but that one makes centring it very hard.
To get it centered using CSS you'll need to set some width on it I'm afraid.
The standard way to center an element is to set auto margins left and right. To center text inside an element use "
text-align:centerAnyway the following works nicely in a browser that suports display:inline block (e.g. safari):
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" \
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
#test {
text-align:center;
}
#test div {
display:inline-block;
text-align:left;
}
</style>
</head>
<body>
<div id="test">
<div>3 blah<br /> blah blah</div>
<div>2 blah<br /> blah blah</div>
<div>1 blah<br /> blah blah</div>
</div>
</body>
</body>
</html>
Alternatively display:table-* could be used, but that too is not without it's lack of support
This entire dive is inside a <center> tag too =/
That div needs the following properties:
div{width:auto;margin:0 auto;}
The top and bottom value for margin is arbitrary, the key is your side margins.
The center tag is deprecated, like dave said, if you want to center something (block elements), margin:0 auto is the best way to go, the only thing is you need set widths.
What you may want to do is ask yourself if it needs to be centered at all though. If not, then there would be no problem. If just adding a fixed left margin is good enough, then just do that. If it really needs to be centered, then use ems for the widths, and size a few percent extra to account for different fonts (which will slightly offset centering but one would not notice)
The alternate to using auto margins on a block is to use text-align on the parents of inline elements, that way you do not need to know (or guess) the width. Add to it IE6's unwillingness to center some block every so often ...
I hardly dare mention it, but display: table-* ... could be an alternative, but IE is even less cooperative there.
The alternate to using auto margins on a block is to use text-align on the parents of inline elements, that way you do not need to know (or guess) the width. Add to it IE6's unwillingness to center some block every so often ...
I hardly dare mention it, but display: table-* ... could be an alternative, but IE is even less cooperative there.
Thanks for all the input. I will get back to tinkering with this using some of your suggestions!
