DIV align help

SJ

Can you help me....

I want this layout

--------------- --------------- -----------------
| text | | text | | text |
| <select>| |<select| | <select |
--------------- --------------- -------------------

I just want to use DIVs... I thoough this would do it but the break
screws it up.. any ideas?

<style>
..test{
border: solid red;
display: inline;
}

<div>
<div class="test">
text <br/>
<select></select>
</div>
<div class="test">
text <br/>
<select></select>
</div>
</div>

Ben C

On 2007-04-02, SJ <sj******@gmail.comwrote:

Can you help me....

I want this layout

--------------- --------------- -----------------
| text | | text | | text |
| <select>| |<select| | <select |
--------------- --------------- -------------------

I just want to use DIVs... I thoough this would do it but the break
screws it up.. any ideas?

display: inline-block in browsers that support it (Opera and Konqueror
are two that do for example).

Not supported in FF or IE unfortunately though. The best workaround is
to change "display: inline" to "float: left". So long as each unit is
the same height it should work OK.

><style>
.test{
border: solid red;
display: inline;
}

<div>
<div class="test">
text <br/>
<select></select>
</div>
<div class="test">
text <br/>
<select></select>
</div>
</div>

SJ

On Apr 2, 4:15 pm, Ben C <spams...@spam.eggswrote:

On 2007-04-02, SJ <sjour...@gmail.comwrote:

Can you help me....

I want this layout

--------------- --------------- -----------------
| text | | text | | text |
| <select>| |<select| | <select |
--------------- --------------- -------------------

I just want to use DIVs... I thoough this would do it but the break
screws it up.. any ideas?

display: inline-block in browsers that support it (Opera and Konqueror
are two that do for example).

Not supported in FF or IE unfortunately though. The best workaround is
to change "display: inline" to "float: left". So long as each unit is
the same height it should work OK.

<style>
.test{
border: solid red;
display: inline;
}

<div>
<div class="test">
text <br/>
<select></select>
</div>
<div class="test">
text <br/>
<select></select>
</div>
</div>- Hide quoted text -

- Show quoted text -

thanks a milliion!

jim

SJ:
Adjust the left and right margin settings as the div box widths get
larger or smaller.
The following sizes and margins appear to give the look you want in
ffx and msie:
-------------------------------------------------
<style type="text/css">
..sectiondiv{
float:left;
margin: 0% 3% 0% 3%;
width:25%; height:150px;
border:1px red dashed;
color:navy; text-align:center;
padding:5px;
background-color:yellow;
}
</style>
</head>
<body >
<div id="section1" class="sectiondiv" >
<ptext here and here and here and here and here and here</p>
<form><select><option value="">blah</option>
<optionvalue="">blah</option></select></form>
</div>

<div id="section2" class="sectiondiv" >
<ptext here and here and here and here and here and here</p>
<form><select><option value="">blah</option>
<option value="">blah</option></select></form>
</div>

<div id="section3" class="sectiondiv" >
<ptext here and here and here and here and here and here </p>
<form><select><option value="">blah</option>
<option value="">blah</option></select></form>
</div>

DIV align help

This discussion thread is closed

Similar topics