467,161 Members | 1,122 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,161 developers. It's quick & easy.

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>

Apr 2 '07 #1
  • viewed: 3171
Share:
3 Replies
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
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
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.

Similar topics

10 posts views Thread by Markus Ernst | last post: by
4 posts views Thread by shivas | last post: by
1 post views Thread by =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?= | last post: by
2 posts views Thread by Icarus - iD_Ten_T helper | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.