what makes a div expand ?

red

This page shows 3 divs side by side surrounded by a wrapper, but the
wrapper thinks there's nothing in it, so its collapsed at the top. How
do I get the wrapper to expand around the divs ?
http://www.cardini.tv/test/test.htm

#p1{float:left;width:25%;border:solid 1px;}
#p2{float:left;width:25%;border:solid 1px;}
#p3{float:left;width:40%;border:solid 1px;}
#w{border:solid;width:90%; margin:auto;}

red

Jul 21 '05 #1

Subscribe Post Reply

15448

Neal

On Sat, 30 Oct 2004 05:27:58 GMT, red <gr*****@reenie.org> wrote:

This page shows 3 divs side by side surrounded by a wrapper, but the
wrapper thinks there's nothing in it, so its collapsed at the top. How
do I get the wrapper to expand around the divs ?
http://www.cardini.tv/test/test.htm

#p1{float:left;width:25%;border:solid 1px;}
#p2{float:left;width:25%;border:solid 1px;}
#p3{float:left;width:40%;border:solid 1px;}
#w{border:solid;width:90%; margin:auto;}

red

Float literally means "move it to the side of the legitimate content." But
you don't have any legitimate content. So the w div is virtually empty.

Jul 21 '05 #2

red

Neal wrote:

On Sat, 30 Oct 2004 05:27:58 GMT, red <gr*****@reenie.org> wrote:
This page shows 3 divs side by side surrounded by a wrapper, but the
wrapper thinks there's nothing in it, so its collapsed at the top. How
do I get the wrapper to expand around the divs ?
http://www.cardini.tv/test/test.htm

#p1{float:left;width:25%;border:solid 1px;}
#p2{float:left;width:25%;border:solid 1px;}
#p3{float:left;width:40%;border:solid 1px;}
#w{border:solid;width:90%; margin:auto;}

red

Float literally means "move it to the side of the legitimate content."
But you don't have any legitimate content. So the w div is virtually empty.

So how do I put a border around the three divs ?

Jul 21 '05 #3

Neal

On Sat, 30 Oct 2004 06:04:54 GMT, red <gr*****@reenie.org> wrote:

Neal wrote:
Float literally means "move it to the side of the legitimate content."
But you don't have any legitimate content. So the w div is virtually
empty.

So how do I put a border around the three divs ?

Havce something as actual not-positioned-out-of-it content in the div.
Preferably at the end.

Jul 21 '05 #4

red

Neal wrote:

On Sat, 30 Oct 2004 06:04:54 GMT, red <gr*****@reenie.org> wrote:
Neal wrote:
Float literally means "move it to the side of the legitimate
content." But you don't have any legitimate content. So the w div is
virtually empty.

So how do I put a border around the three divs ?

Havce something as actual not-positioned-out-of-it content in the div.
Preferably at the end.

How do I do that ? What are you talking about ? I honestly can't figure
out what that is supposed to mean. I really really really would like to
know. I want the container to expand to surround the content of the
divs. Is this possible at all ?

Jul 21 '05 #5

David Dorward

red wrote:

This page shows 3 divs side by side surrounded by a wrapper, but the
wrapper thinks there's nothing in it, so its collapsed at the top.

http://www.positioniseverything.net/easyclearing.html

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Jul 21 '05 #6

Gus Richter

red wrote:

Neal wrote:
On Sat, 30 Oct 2004 06:04:54 GMT, red <gr*****@reenie.org> wrote:
Neal wrote:

Float literally means "move it to the side of the legitimate
content." But you don't have any legitimate content. So the w div is
virtually empty.
So how do I put a border around the three divs ?

Havce something as actual not-positioned-out-of-it content in the div.
Preferably at the end.

How do I do that ? What are you talking about ? I honestly can't figure
out what that is supposed to mean. I really really really would like to
know. I want the container to expand to surround the content of the
divs. Is this possible at all ?

Try running this modified version. Comments included.

--
Gus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test.php</title>

<style type="text/css">
#p1{float:left;width:25%;border:solid 1px;}
#p2{margin-left:25%;width:25%;border:solid 1px;}
#p3{float:right;width:40%;padding-right:9%;border:solid 1px;}
#w{border:solid;width:90%; margin:auto;}
</style></head>

<body>
<div id="w">
<div id="p1">
some text
</div>
<div id="p3">
some text<br><br>
This cannot be done as in *test.html* because float:left; on the three
divs takes them out of flow and therefore the wrapper is empty.<br><br>
I changed the order of the divs in the html to place the floated divs
first and the static (long one) last.<br><br>
I'm fudging it here with float:left; on the 1st and float:right; on the
3rd and NO float on the 2nd (middle) which gives the wrapper height.<br><br>
It works best with fixed values instead of %ages.<br><br>
I added padding-right value to simulate the required width (apparent)
and position as required.<br><br>
</div>
<div id="p2">
A whole lotta text and some and some more.A whole lotta text and some
and some more.A whole lotta text and some and some more.A whole lotta
text and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more.A whole lotta text and some and some more.A
whole lotta text and some and some more.A whole lotta text and some and
some more.A whole lotta text and some and some more.A whole lotta text
and some and some more. </div>
</div>
</body></html>

Jul 21 '05 #7

Jan Roland Eriksson

On Sat, 30 Oct 2004 05:27:58 GMT, red <gr*****@reenie.org> wrote:

This page shows 3 divs side by side surrounded by a wrapper, but the
wrapper thinks there's nothing in it, so its collapsed at the top. How
do I get the wrapper to expand around the divs ?
http://www.cardini.tv/test/test.htm

#p1{float:left;width:25%;border:solid 1px;}
#p2{float:left;width:25%;border:solid 1px;}
#p3{float:left;width:40%;border:solid 1px;}
#w{border:solid;width:90%; margin:auto;}

<http://www.css.nu/exp/layer-ex3b.html>
<http://www.css.nu/exp/layer-ex3c.html>
<http://www.css.nu/exp/layer-ex3d.html>
<http://www.css.nu/exp/layer-ex4a.html>

--
Rex

Jul 21 '05 #8

Similar topics

Expand/Collapse DIVS

by: James Hurrell | last post by:

Hi, I'm using the following javascript function to expand and collapse portions of text in a web page (targeted at IE5.5 and above): function doExpand(paraNum,arrowNum) { if...

Javascript

Table Layout and What's Wrong With it

by: Neal | last post by:

Patrick Griffiths weighs in on the CSS vs table layout debate in his blog entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A quite good article.

HTML / CSS

Database server will not expand mdf or ndf files

by: 2centbob | last post by:

Has anyone had an issue with SQL Server not being able to expand against a RAID 5 file system? My current configuration is that the server is started and stopped using the local system account. I...

Microsoft SQL Server

expand / collapse all with this script

by: Randy Starkey | last post by:

Hi, Is there a way to expand and collapse all if I have multiple implementations of this script on a single page? The script works well individually. Thanks! --Randy Starkey ---

Javascript

TreeView 2.0 Expand/Collapse Bug when Base Target not set to _self

by: Shadow Lynx | last post by:

When using ASP.NET 2.0's built-in TreeView on a page with <BASE target = "AnythingBut_Self"></BASE> in the HEAD, the expand/collapse buttons fail to function. The reason for this is that the...

ASP.NET

Expand command exit code -2. What does it mean?

by: Benzi Eilon | last post by:

I am executing an Expand command in order to expand a CAB file. This is done by calling CreateProcess with the Expand command and then WaitForSingleObject and checking the process exit code. My C++...

.NET Framework

What is C suitable for nowadays?

by: Matthew Zhou | last post by:

I am a students learning programming, and want to do some software projects to practice myself. However, no one will only use one language to make all the tasks done. And every languages has its...

C / C++

contract and expand menus based on the previous state

by: Nospam | last post by:

I don't know what it is I am doing wrong, I am trying to get the menus to either expand or contract based on their previous states, i.e if already expanded if clicked again contract, and if...

Javascript

Auto expand the grid upon search... - HIGH PRIORITY

by: dorandoran | last post by:

I used this article (http://www.codeproject.com/KB/webforms/EditNestedGridView.aspx) to accomplish expand/collaspe grid. I also added a search and it works. but i need to be now automatically expand...

ASP.NET

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

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,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing