The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Getting blocks to fit around floats?
Quboid
post Oct 25 2006, 09:47 AM
Post #1





Group: Members
Posts: 2
Joined: 25-October 06
Member No.: 563



Hi all, this place has changed since I was last here! Anyway...

I want to have block elements (divs, containing tables and forms) fit themselves around a floated element. I've distilled the problem into the code below, if you c&p this into a text file and view it you'll see what I mean. The 3 'Foo' blocks are all the same width, however, they are all influenced by the 'Bar' block in different ways. What I want is for the first two 'Foo' blocks to be narrower, so that they aren't drawn behind the 'Bar' block, while the 3rd 'Foo' block (which is completely below the 'Bar' block in my test browsers) takes the full page width.

I can't predict the length of the 'Bar' block so I can't set right margins. The actual code is 1000x more complex than this and the actual contents are dynamic.


CODE
<html>
<head>
<style type="text/css">
body {    background: #eee; }
.box {
    width: 200px;
    border: 2px solid #00F;
    float: right;
}
.form {
    background: #FFF;
    border: 1px solid #333;
}
</style>
</head>

<body>
<div class="box">
    <p>Bar!</p>
    <p>Bar!</p>
    <p>Bar!</p>
    <p>Bar!</p>
</div>

<div class="module">
    <div class="form">
        <p>Foo!</p>
        <p>Foo!</p>
    </div>
    <div class="form">
        <p>Foo!</p>
        <p>Foo!</p>
    </div>
    <div class="form">
        <p>Foo!</p>
        <p>Foo!</p>
    </div>
</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dansg
post Oct 25 2006, 05:40 PM
Post #2





Group: Members
Posts: 1
Joined: 25-October 06
Member No.: 568



will a background:#FFF on the .box suffice?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 25 2006, 06:05 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(Quboid @ Oct 25 2006, 04:47 PM) *

I can't predict the length of the 'Bar' block so I can't set right margins.


Do you mean you can't predict the width of div.box? Otherwise a right margin on the two first div.form should work. The last div.form could return to "margin-right: auto" and also be given a "clear: both".

If you do mean you can't predict the width of div.box, how are you going to specify its width (if at all)?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Quboid
post Oct 26 2006, 09:28 AM
Post #4





Group: Members
Posts: 2
Joined: 25-October 06
Member No.: 563



I can predict the width. The problem is the length, or height if you prefer. This means that maybe only the first box needs a margin or all three need margins, I don't know.

I can't just set a background colour of #FFF, the content in div.form elements are actually pretty complex with images and tables and suchlike which I need to stay outside the floating box and not get hidden under it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 26 2006, 01:04 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



If div.box is floated, the inline content inside div.module should (normally) not end up hidden behind div.box, even though the borders of div.form will. Compare http://www.w3.org/TR/CSS21/visuren.html#img-float2p. If inline content does end up behind div.box maybe it's not fluid enough? Hard to say without a page that demonstrates the behavior.

Otherwise IE6 seems to do what you want if you give div.form "display: inline-block", but I can't say if the behavior is what W3C specifies, and my other browsers don't act the same.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 11:10 AM