By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,738 Members | 1,080 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,738 IT Pros & Developers. It's quick & easy.

DIV align help

P: n/a
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>

Apr 2 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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>
Apr 2 '07 #2

P: n/a
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!

Apr 2 '07 #3

P: n/a
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>

Apr 3 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.