473,289 Members | 1,743 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,289 software developers and data experts.

How to display 3 elements next to each other

Now I'm wondering how to display 3 elements next to each other. I
came up with the following solution using float:left, but would like
opinions if this is the right way to go.

The idea is to have an outer div, which in my example below is
id="available". Inside this div is a table with float:left. Then is
another div with overflow:hidden, which will be on the right. And
inside this right div is the same pattern: that is, there is a div
with float:left, which will be on the left of the right box -- ie. so
it will be the middle element -- and there is another element, which
in my example is an input with overflow:hidden. It looks fine in
Mozilla 3 and IE 7.

My markup is correct this time per the validator.

<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>3 elements next to each other</title>
</head>
<body>
<div id="container">
<div id="available">
<!-- first element on left -->
<table style="float: left; margin-right: 1em;" border="1"
cellpadding="0" cellspacing="0">
<tr><td>Hello1</td></tr>
<tr><td>Hello2</td></tr>
<tr><td>Hello3</td></tr>
<tr><td>Hello4</td></tr>
<tr><td>Hello5</td></tr>
</table>

<!-- second/third element on right -->
<div style="border: thin solid red; overflow: hidden;">
<!-- second element on left -->
<div style="border: thick solid blue; float: left; margin-right:
1em;">

<input id="selectedDay" readonly="readonly" value="d/M/yyyy"
style="display: block; margin-bottom: 1em; width: 9em;" type="text"/>
<select id="availableTimes" size="5" style="width:
9em;"><option/></select>
</div>
<!-- third element on right -->
<input value="Button" style="overflow:hidden; height: 2em;"
type="button"/>
</div>

</div<!-- available -->

<p/>
</div<!-- container -->
</body>
</html>

Sep 9 '08 #1
0 2864

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
by: Dan R Brown | last post by:
I have a large form that is generated dynamically in a jsp using xml / xslt. So, to break up this form into several "tabbed" sections, I break up the form using <div> tags. Each <div...
6
by: Thresh | last post by:
Hi all, two problems that I've been wrestling with: 1) I've got some images on a site that are links. I've got them set for 2px of padding, and a 1px border. The color changes upon hover. This...
23
by: Mat | last post by:
<div id="container"> <div id="main"> <div id="header"> <p class="Address">123 Fake Street, </p> <p class="City">Crazy City, </p> <p class="Province">Ontario </p> <p class="PostalCode">H0H...
3
by: Iain Hallam | last post by:
Hi. I've been using display:none on the style property of some <option> elements in my forms, which works fine with Mozilla - as expected it removes the option from my dropdown (although it...
12
by: Eugen J. Sobchenko | last post by:
Hi! I'm writing function which swaps two arbitrary elements of double-linked list. References to the next element of list must be unique or NULL (even during swap procedure), the same condition...
2
by: ruby_bestcoder | last post by:
Hi Im having problem in firefox with display:none/block. I have essentially 3 li elements. In each element there are a few nested div:s. Clicking on one of the divs, makes another div to...
5
by: CES | last post by:
All, I was hoping that someone might be able to help me with a few questions on Aligning Block Elements properly... Basically I have a row that has a fixed width of 900px. Within the row their is...
18
by: fishwick | last post by:
I haven't really done any css in quite a while, and am banging my head against the wall trying get the rudimentary layout together of a church website home page to display correctly - I don't want...
1
by: Benny Ng | last post by:
Dear All, Now I met one problem in the development of my one application. I have one ASP.NET page. It's for disply the information of customer. But now I have one new requirement. It's to...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...

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.