473,322 Members | 1,188 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,322 software developers and data experts.

css flow for layouts

Hi,
I'm trying to get the following type of layout.
div1 runs text over three lines. I want div2 to abut div1 on it's right. I
want div3 to abut div1 and be under div2. Finally there's div3 which appears
under all this.

The problem I have is that I can't seem to force div3 to align against div1
and stay under div2, regardless of page width - it wants to slide up next to
div2. i'd be happy to fix widths on div1, div2 & 3 etc. to try and get the
right alignment.

This is just an abstraction of a real example where graphics and a menu bar
wont do what I want!

Any ideas? I've added some test html/css below. I tried adding an extra div
to try and constrain div2 & 3 but didn't get the right result - div3 is
being squashed.

Thanks,

Paul

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
#div1 {
float: left;
}
#div2 {
float: left;
}
#div3 {
clear: both;
float: left;
}
#divContent {
clear: both;
float: left;
}
#div23 {
width: 220px;
}
-->
</style>
</head>
<body>
<div id="divHeader">
<div id="div1">DIV1<br>DIV1b<br>DIV1c</div>
<div id="div23">
<div id="div2">Content for id "div2" Goes Here</div>
<div id="div3">Content for id "div3" Goes Here</div>
</div>
</div>
<div id="divContent">Content for class "divContent" Goes Here</div>
</body>
</html>


Jul 21 '05 #1
4 11111
Paul Andrews wrote:
Hi,
I'm trying to get the following type of layout.
div1 runs text over three lines. I want div2 to abut div1 on it's right. I
want div3 to abut div1 and be under div2. Finally there's div3 which appears
under all this.

The problem I have is that I can't seem to force div3 to align against div1
and stay under div2, regardless of page width - it wants to slide up next to
div2. i'd be happy to fix widths on div1, div2 & 3 etc. to try and get the
right alignment.

This is just an abstraction of a real example where graphics and a menu bar
wont do what I want!

Any ideas? I've added some test html/css below. I tried adding an extra div
to try and constrain div2 & 3 but didn't get the right result - div3 is
being squashed.


Just add a float:left; to div23.

--
Gus
Jul 21 '05 #2

"Gus Richter" <gu********@netscape.net> wrote in message
news:Tr********************@golden.net...
Paul Andrews wrote:
Hi,
I'm trying to get the following type of layout.
div1 runs text over three lines. I want div2 to abut div1 on it's right. I want div3 to abut div1 and be under div2. Finally there's div3 which appears under all this.

The problem I have is that I can't seem to force div3 to align against div1 and stay under div2, regardless of page width - it wants to slide up next to div2. i'd be happy to fix widths on div1, div2 & 3 etc. to try and get the right alignment.

This is just an abstraction of a real example where graphics and a menu bar wont do what I want!

Any ideas? I've added some test html/css below. I tried adding an extra div to try and constrain div2 & 3 but didn't get the right result - div3 is
being squashed.
Just add a float:left; to div23.


Thanks Gus,

It didn't make a bit of difference to the layout. Div3 appears over six
lines - a word on each (using ie 6).

Paul
--
Gus

Jul 21 '05 #3
"Paul Andrews" <ac***@dial.pipex.commmmm> wrote in message
news:iq****************@newsfe5-gui.ntli.net...

"Gus Richter" <gu********@netscape.net> wrote in message
news:Tr********************@golden.net...
Paul Andrews wrote:
Hi,
I'm trying to get the following type of layout.
div1 runs text over three lines. I want div2 to abut div1 on it's right.
I
want div3 to abut div1 and be under div2. Finally there's div3 which appears under all this.

The problem I have is that I can't seem to force div3 to align against div1 and stay under div2, regardless of page width - it wants to slide up next to div2. i'd be happy to fix widths on div1, div2 & 3 etc. to try and get the right alignment.

This is just an abstraction of a real example where graphics and a
menu
bar wont do what I want!

Any ideas? I've added some test html/css below. I tried adding an
extra
div to try and constrain div2 & 3 but didn't get the right result - div3

is being squashed.


Just add a float:left; to div23.


Thanks Gus,

It didn't make a bit of difference to the layout. Div3 appears over six
lines - a word on each (using ie 6).


Removing "clear: both" from div3 did the trick. Doh!

Thanks for trying Gus.

Paul
Jul 21 '05 #4
Paul Andrews wrote:
It didn't make a bit of difference to the layout. Div3 appears over six
lines - a word on each (using ie 6).


Removing "clear: both" from div3 did the trick. Doh!


You're right and I'm sorry that I only tested in FF. Adding only
float:left; to "div23" only fixes FF, but not IE.

Also removing the float:left; from "div2" and "div3" and clear:both;
from "div3" makes "div2" and "div3" both Static which satisfies IE,
Opera and FF.

The best way is to leave the floats and the clear, but also to include
position:relative; for "div23" and also to add width:100%; to "div2" and
div3".

--
Gus
Jul 21 '05 #5

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

Similar topics

1
by: Dario de Judicibus | last post by:
I wish to create two simple layouts by using only HTML, CSS and the minimum JavaScript as possible. Layouts should be "elastic" (no fixed widths and heights) and cross-browser enabled. The first...
12
by: Eric Osman | last post by:
This text starts +---------------+ on the left but | | then when the box | some boxed | ends we see that | text | the text on the | | left is...
6
by: Tristan Miller | last post by:
Greetings. Can someone point me to a good source of nice, simple stylesheets, similar to the W3C Core Styles provided at http://www.w3.org/StyleSheets/Core/? I don't need anything fancy like...
0
by: John Bradley | last post by:
I've read and understood the w3 specs on css1 and css2. I've done some positioned layouts on my own system that worked as expected. But - I'm concerned about letting anything on to the live system...
11
by: Robert Bowen | last post by:
Hello all. I have been given mock-ups (in static HTML) of some pages for a site I am working on. The client would like these pages to look exactly as they do now. The problem is that the content is...
7
by: Alan J. Flavell | last post by:
A colleague recently breezed in with a new web page design. He didn't tell me where he got the ideas from, but ... Looking at his stylesheets, I noticed they identified themselves as...
16
by: Michael Rozdoba | last post by:
I'm far from a CSS expert, but what I see of it I really like & I love keeping content & style separate. I also hate the way table layout produces convoluted bulky code. However when asked why...
4
by: sweep | last post by:
Hi there, I have a problem with some CSS I'm writing and I was looking for a little help. I have a nav bar at the top and left side of my page in CSS which work fine. The remaining space has a...
3
by: borntonetwork | last post by:
I am creating a simple form using designer (qt4) on Ubuntu. I use pyuic to create a python script from the form. I run the script and the form shows up fine. The idiosyncrasy occurs when I try to...
4
by: james00 | last post by:
Switching Page Layouts!!! Does anyone have any idea how to create a script for Switching Page Layouts. I know how to create one for Style Sheet Switcher ...
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: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
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: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.