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

Making the container grow

Here's the code:

<html>
<head>
<title>CSS Test</title>
<style>
div.container {
border-width:1px;
border-color:#000;
border-style:solid;
}

div.box {
border-width:1px;
border-color:#F00;
border-style:solid;
width:200px;
height:200px;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
Hello World
</div>
</body>
</html>

When viewing this using Mozilla 1.6 and Opera 7.51 (don't know about
other browsers, no chance to test on them), the box-div breaks out of
the container-div (which only surrounds "Hello World").
When I remove the float:left; it works again, but I really do need it in
my layout.

Is there a way to make the container automatically include the
float:left;-div?
Thanks for any hints,
Florian
Jul 20 '05 #1
6 7129
Els
Florian Brucker wrote:
Here's the code:

<html>
<head>
<title>CSS Test</title>
<style>
div.container {
border-width:1px;
border-color:#000;
border-style:solid;
}

div.box {
border-width:1px;
border-color:#F00;
border-style:solid;
width:200px;
height:200px;
float:left;
}
div.clearall{
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
Hello World
<div class="clearall"></div>
</div>
</body>
</html>

When viewing this using Mozilla 1.6 and Opera 7.51 (don't
know about other browsers, no chance to test on them), the
box-div breaks out of the container-div (which only
surrounds "Hello World"). When I remove the float:left; it
works again, but I really do need it in my layout.

Is there a way to make the container automatically include
the float:left;-div?


See my additions above :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Bon Jovi - Lay Your Hands On Me
Jul 20 '05 #2
On Mon, 26 Jul 2004 23:39:00 +0200, Florian Brucker <to**@torfbold.com>
wrote:
Here's the code:
Why not a URL? Why make more work for me when you want my help?
When viewing this using Mozilla 1.6 and Opera 7.51 (don't know about
other browsers, no chance to test on them), the box-div breaks out of
the container-div (which only surrounds "Hello World").
When I remove the float:left; it works again, but I really do need it in
my layout.
You gave an explicit height to the float, but does the container have any
height? What is it's height? Answer: it's content. The float is out of the
flow, so it's height isn't factored in. The container div should be only
1em high (if the text does not wrap). And looky, it is. Your example is a
perfect expression of what float really does.
Is there a way to make the container automatically include the
float:left;-div?


Not really.

Adding enough content to the container after the float to make the div
tall enough is what's normally done. Or set a height on the container, but
there's problems in that too. Min-height would be perfect here except for
IE's asinine CSS compatability.
Jul 20 '05 #3
On Mon, 26 Jul 2004 17:55:07 -0400, Neal <ne*****@yahoo.com> wrote:
On Mon, 26 Jul 2004 23:39:00 +0200, Florian Brucker <to**@torfbold.com>
wrote:

Is there a way to make the container automatically include the
float:left;-div?


Not really.


Except for what Els said. :-\
Jul 20 '05 #4
Els
Neal wrote:
On Mon, 26 Jul 2004 17:55:07 -0400, Neal
<ne*****@yahoo.com> wrote:
On Mon, 26 Jul 2004 23:39:00 +0200, Florian Brucker
<to**@torfbold.com> wrote:

Is there a way to make the container automatically
include the float:left;-div?


Not really.


Except for what Els said. :-\


Time for coffee? ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Bon Jovi - Lay Your Hands On Me
Jul 20 '05 #5
On 26 Jul 2004 21:59:53 GMT, Els <el*********@tiscali.nl> wrote:
Neal wrote:
On Mon, 26 Jul 2004 17:55:07 -0400, Neal
<ne*****@yahoo.com> wrote:
On Mon, 26 Jul 2004 23:39:00 +0200, Florian Brucker
<to**@torfbold.com> wrote:

Is there a way to make the container automatically
include the float:left;-div?

Not really.


Except for what Els said. :-\


Time for coffee? ;-)


ALWAYS time for coffee! 8-D
Jul 20 '05 #6
Okay, thanks you both!

(And sorry for not putting it online but posting the code, will do
better next time.)

Florian
Jul 20 '05 #7

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

Similar topics

2
by: pc | last post by:
Hi, Currently we are using a CDwordArray type array to store some DWORD data. This data is dynamic and we need to continuously grow the array size using SetAtGrow() . Due to performance reasons,...
2
by: Stewart | last post by:
Originally posted in comp.lang.javascript: Newsgroups: comp.lang.javascript From: "Stewart" Date: 23 Aug 2005 02:50:04 -0700 Local: Tues, Aug 23 2005 10:50 am Subject: FireFox, RemoveChild,...
2
by: Jayjay | last post by:
I'm trying to get a report that will have something like the below layout: Item # Item Description Quantity Unit $ Total $ ~~~~~~~~~~ The Item Description field is...
16
by: Sensei | last post by:
Hi! I'm looking for something similar to the map container, but with a slight modification, a unique key, with multiple assignments to each one. I think some container in the STL has it, but I...
11
by: Edson Peacock | last post by:
I have a report with sub reports, one of the subreports have 12 text boxes that are 2" high and I want them all to grow if one goes to 3" high. If anyone has any suggestions they are very much...
7
by: toton | last post by:
Hi, I have a STL vector of of characters and the character class has a Boost array of points. The things are vector<Characterchars; and class Character{ private: array<Point,Npoints; }; Now...
2
by: andrew18 | last post by:
Hi All, Two questions: 1. Is it possible to make a floated div grow in width with its contents? I've been searching on the web for a way to make the width of a float grow with the width of...
20
by: Martin Jørgensen | last post by:
Hi, I'm reading a number of double values from a file. It's a 2D-array: 1 2 3 4 5 6 7 ------------- 1 3.2 2 0 2.1 3 9.3 4
5
by: Olumide | last post by:
Hello - To begin with, I'm not the most experienced STL use out there but I'm slowly getting there. One bug(?) that's plagued me of recent is the way the OS (or is it STL?) appears to relocate a...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
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,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
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$) { } ...
0
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...
0
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
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

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.