Previous Message
Next Message

float causing container not to wrap?

Sent by Tony Dupre on 25 March 2006 08:08


I realize there is most likely a simple fix for this but I have tried
everything I can think of - here is my problem:

I'm trying to position some div elements (sub1, sub2) inside of a container
div. The container div with automatically resize to fit the subs in it,
until I give sub1 "float:left". At that point, the container div no longer
auto sizes to fit sub1 into it.

Along with that, if sub1 is floated left, the left side of sub2 overlaps the
top of sub1.

So, I have two questions:

1. How can I float a div element and still have the container auto size
around it?

2. As for sub2 overlapping with sub1, I realize I can float sub2 left to get
rid of the overlapping, but then it no longer auto sizes to fill up the
remaining horizontal space in the container. So, how can I have it not
overlap, but still take up the remaining space?

The code I've put below does not yet have the "float:left" attributes put
into sub1 or sub2 divs yet. If you don't quite know what I mean, take a look
at my code, then put float:left into sub1, see what happens, then into
sub2...
(also, I tried it without giving sub1 specific width or height, and that
doesn't seem to help)


CODE:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>demo</title>

<style type="text/css">


div {
  position:relative;
  }

..container {
  padding:10px;
  border:1px solid black;
  }

..sub1 {
  float:left;
  width:100px;
  height:200px;
  border:1px solid lime;
  }

..sub2 {
  border:1px solid purple;
  }


</style>

</head>

<body>


<div class="container">

    <div class="sub1">
        sub1
    </div>

    <div class="sub2">
        sub2
    </div>

</div>



</div>

</body>
</html>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message