473,545 Members | 1,987 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How do I create this type of structure with divs

Hi,

I've been playing around with divs, but I've been having issues
creating layouts that work in both IE and Firefox. I'm trying to create
a layout similar to the following table:

<table align="center" width="700" border="1">
<tr>
<td>
<table align="center" width="500">
<tr>
<td align="left">AA A</td>
<td align="left">BB B</td>
</tr>
<tr>
<td align="left">CC C</td>
<td align="left">DD D</td>
</tr>
<tr>
<td colspan="2" align="center"> EEE</td>
</tr>
</table>
</td>
</tr>
</table>

I don't want to do anything absolute. This is basically so an input
form sits nicely inside my page.

Help appreciated. Thanks.

Sep 1 '05 #1
10 2183
Els
Spondishy wrote:
Hi,

I've been playing around with divs, but I've been having issues
creating layouts that work in both IE and Firefox. I'm trying to create
a layout similar to the following table:
[snip table structure]
I don't want to do anything absolute. This is basically so an input
form sits nicely inside my page.


Input forms can be considered tabular data imo. I use tables for
those. They can be done using CSS, but I find it has more drawbacks
than advantages.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Squeeze - Loving You Tonight
Sep 1 '05 #2
It would certainly save me time thats for certain. I ended up with some
crazy div nesting (centering and left aligning, with some floats for
good measure).

Is this typical, or just me?

Sep 1 '05 #3
Els
Spondishy wrote:
It would certainly save me time thats for certain. I ended up with some
crazy div nesting (centering and left aligning, with some floats for
good measure).

Is this typical, or just me?


I wouldn't call it typical, but it's certainly not just you either ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Squeeze - Up The Junction
Sep 1 '05 #4
Spondishy schreef:
Help appreciated. Thanks.


This will do the job:

the xhtml:

<div class="example" >
<div>text 1</div>
<div>text 2</div>
<div class="breaker" ></div>
<div>text 3</div>
<div>text 4<br />Another line</div>
<div class="breaker" ></div>
<div>text 5<br />line<br />and another</div>
<div>text 6</div>
<div class="breaker" ></div>
</div>

the CSS:
<style>
div.example{
width: 400px;
}

div.example div{
width: 200px;
float: left; /* place one div beside the other */
}

div.example div.breaker{
height: 1px; /* make the div 1px in height */
font-size: 0; /* IE-hack or height */
clear: both; /* no content to the left or right */
background: transparent; /* no colour */
width: 400px;
float: none; /* overrule the float-definition of div.example div */
border-top: 1px solid blue;
}
</style>

~ Sorry for not posting an URL, but I don't have access to my website now ~
--
Niek
Sep 2 '05 #5
Els
'sNiek wrote:
Spondishy schreef:
Help appreciated. Thanks.


This will do the job:

the xhtml:

<div class="example" >
<div>text 1</div>
<div>text 2</div>
<div class="breaker" ></div>
<div>text 3</div>
<div>text 4<br />Another line</div>
<div class="breaker" ></div>
<div>text 5<br />line<br />and another</div>
<div>text 6</div>
<div class="breaker" ></div>
</div>

the CSS:

<style>
div.example{
width: 400px;
}

div.example div{
width: 200px;
float: left; /* place one div beside the other */
}

div.example div.breaker{
height: 1px; /* make the div 1px in height */
font-size: 0; /* IE-hack or height */
clear: both; /* no content to the left or right */
background: transparent; /* no colour */
width: 400px;
float: none; /* overrule the float-definition of div.example div */
border-top: 1px solid blue;
}
</style>


That's a lot of extra code compared to a simple table structure.
It also doesn't give any semantics. In a text only medium you won't be
sure which input field belongs to which label.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Thunder - Love Walked In
Sep 2 '05 #6
Els schreef:
That's a lot of extra code compared to a simple table structure.
Not if you place the css in a separate css-file, the only fifference in
extra code is the "<div class="breaker" ></div>"-line, you could replace
that with a simple <p>-tag
It also doesn't give any semantics. In a text only medium you won't be
sure which input field belongs to which label.


Okeh, but in most cases it will be something like:
name: <input>
tel: <input>
So it will be clear which input field belangs to ehich label.

Anyway, i think this is a nice solution to create a table-like
construction. If your content is tabular data, you really should use a
table off course.

--
Niek
Sep 2 '05 #7
Els
'sNiek wrote:
Els schreef:
That's a lot of extra code compared to a simple table structure.
Not if you place the css in a separate css-file, the only fifference in
extra code is the "<div class="breaker" ></div>"-line, you could replace
that with a simple <p>-tag


Still extra code, only now in the CSS file.
A <p> element isn't semantic within a form imo btw.
It also doesn't give any semantics. In a text only medium you won't be
sure which input field belongs to which label.


Okeh, but in most cases it will be something like:
name: <input>
tel: <input>
So it will be clear which input field belangs to ehich label.


That's what I meant. In your construction it would parse as
name: <input> tel: <input> etc.
Not in nice separate lines. The connection between label and input
field would only be visible by the colon, which sometimes isn't even
used in a form.
Anyway, i think this is a nice solution to create a table-like
construction. If your content is tabular data, you really should use a
table off course.


I reckon a form is tabular data :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Skid Row - Slave To The Grind
Sep 2 '05 #8
Els schreef:
I reckon a form is tabular data :-)


Same here!

groet,

--
Niek
Sep 2 '05 #9
Spondishy wrote:

I've been playing around with divs, but I've been having issues
creating layouts that work in both IE and Firefox. I'm trying to create
a layout similar to the following table:

It is a simple two column layout with a footer. Search Google ("2
column layout" +css) for numerous examples.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Sep 2 '05 #10

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

Similar topics

3
6873
by: Francois | last post by:
Is it possible to automatically create an array on load page? I want my script to be external. (<script language="JavaScript" src="somescript.js"></script>) Several pages should use this script. I have an unknown number of <DIV> elements in each page, all with a unique id (ID="name"). I need an array with all the names of these...
10
2280
by: Peter Kirk | last post by:
Hi there can someone please help me with creating dynamic content in a table? For example, see the below javascript and html - why is a new row not created in the table when I click the button? (I am using Internet Explorer 6). <html> <head> <title>TEST</title> <script language="javascript">
7
8830
by: dog | last post by:
I've seen plenty of articles on this topic but none of them have been able to solve my problem. I am working with an Access 97 database on an NT4.0 machine, which has many Access reports. I want my users to be able to select a report, click on a command button on a form, which will then automatically create the report as a pdf file and...
2
1042
by: dw | last post by:
Hello, all. You will all laugh at this silly issue, but here it goes: I'm using CSS to position elements on a page. I've got divs within divs and I'm trying to type into the underlying div, and it won't let me through Design View; I can type fine in HTML view. When I double-click, it takes me to the code-behind. I can drag controls into the...
7
6759
by: pmclinn | last post by:
I was wondering if it is possible to dynamically create a structure. Something like this: public sub main sql = "Select Col1, Col2 from Table a" dim al as new arraylist al = LoadOracleData(sql) '____Do amazing things
2
2377
by: lars.gundersen | last post by:
Hi, I need to apply some indenting (margin) on my divs. I have a forum which uses a tree structure so that the users will be able to see which user replies to what topic. Is there some kind of "easy" way to go though my divs and apply leftmargin style on my divs so that indent? Please be aware of there can be an unlimited number of...
2
3042
by: Jake Barnes | last post by:
Using javascript closures to create singletons to ensure the survival of a reference to an HTML block when removeChild() may remove the last reference to the block and thus destory the block is what I'm hoping to achieve. I've never before had to use Javascript closures, but now I do, so I'm making an effort to understand them. I've been...
4
12418
by: etuncer | last post by:
Hello All, I have Access 2003, and am trying to build a database for my small company. I want to be able to create a word document based on the data entered through a form. the real question is this: can Access create the document and place it as an OLE object to the relevant table? Any help is greatly appreciated. Ricky
6
1706
by: The Natural Philosopher | last post by:
I am trying to create what amounts to an array of 'structures'. I.e. I want to dynamically add to and access an object as myobject.anothernumber // actually represents a nesting level. and myobject.elementintheDOM // this is a pointer to //store particular elements..i.e.
0
7484
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, well explore What is ONU, What Is Router, ONU & Routers main...
0
7928
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 tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7440
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
5997
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 projectplanning, coding, testing, and deploymentwithout human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5344
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 presenter, Adolph Dupr who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3470
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1902
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1030
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
726
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 can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.