473,487 Members | 2,461 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

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
3 3279
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
6792
by: Phil Powell | last post by:
Code: <!-- script src="/js/val_header.js"></script --> <style> <!-- BODY { scrollbar-3d-light-color:#eeeedd; scrollbar-arrow-color:#000000; scrollbar-base-color:#000000;...
10
66001
by: Markus Ernst | last post by:
Hi I have a strange problem with vertical-align. The case can be viewed at http://www.brainput.info/geschichte.html. HTML code: <div id="bild"><img src="geschichte.gif" width="274"...
4
2260
by: shivas | last post by:
Hi, I am using vertical-align for a table row, but the Image and the text are not aligned properly. I don't what to align image in the img tag, rather in the row itself I want to align. I want...
3
4395
by: acunnon | last post by:
I am trying to put together an login page my problem is getting the three items aligned to the middle verticaly without specifing a height to anything on the page. CSS html{ height:100%;...
1
3057
by: =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?= | last post by:
Hello guys, I was wondering if anybody here had implemented a solution where Tables are aligned according to what the hanging indent tells us when there is a potential for the table overflowing...
2
5638
by: Icarus - iD_Ten_T helper | last post by:
I am currently teaching myself PHP, JS, HTML and CSS. I would say I am a beginner to interemediate at varying levels within all 4, however I have some queries and I wonder if any of you can...
6
3529
shane3341436
by: shane3341436 | last post by:
<!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"> <head> <meta...
0
1234
by: rafeig77 | last post by:
I want help How I can align rectangles differ in its tow dimensions inside big rectangle with lesser waste in area ? for mor information align.rar - 1.8 Kb or: copy this code to text file...
1
1623
by: prathna | last post by:
Hi I have this following code <script> function displayFields() { document.getElementById('Label12').style.display = 'none'; document.getElementById('Label13').style.display =...
1
3515
by: panos100m | last post by:
I cant put the text (register,members,find) in the center of the three buttons using Internet explorer... Any help will be much appreciated (html code below) <td class="ct"> <!-- menu...
0
7108
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7181
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
6847
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
5445
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
4875
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
4565
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
0
3071
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
618
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
272
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.