Small CSS problem driving me bananas - help!

Pepe LeFrits · 10-05-2011 7:17pm #1

If anyone can solve this one I will kiss them on the mouth. It's a problem with an overlapping div box across all browsers.

I have two divs like this:

blah blah blah blah blah |
blah blah blah blah blah |
blah blah blah blah blah |......... DIV 2
blah blah blah blah blah |
blah blah blah blah blah |
blah blah blah blah blah |________________
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah ...DIV 1... blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah

DIV 2 is floated to the right within DIV 1 and contains a picture. DIV 1 contains a lot of text, which wraps around DIV 2 no problem.

So far so good. However, I use <blockquote>s and lists (both <ul> and <ol>). They both have a different background colour to differentiate themselves from the rest of the text on the page, so when I use one, it generally looks like this:

blah blah blah blah blah |
blah blah blah blah blah |
blah blah blah blah blah |......... DIV 2
blah blah blah blah blah |
blah blah blah blah blah |
blah blah blah blah blah |________________
blah blah blah blah blah blah blah blah blah blah
.___________________________________
.|.......................................................|
.|quoted text inside my lovely quote box...|
.|__________________________________|

regular text continues on outside the box blah
blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah

Again, this is fine. However, the above situation is reliant on there being sufficient text ABOVE the blockquote/list to wrap around DIV 2 before the blockquote/list appears. If there isnt, the following happens:

blah blah blah blah blah |
blah blah blah blah blah |
.___________________|......... DIV 2
.|quoted text wraps but|
.|the box disappears....|
.|underneath the div2...|________________
.|box, instead of wrapping also................|
.|quoted text inside my lovely quote box...|
.|__________________________________|
blah blah blah blah blah blah blah blah blah

The text in the quote box wraps but the box itself slips underneath DIV2 and looks stupid. Is there anyway to get the whole thing to resize so that it is only as wide as the space between the left margin and DIV2?

I can post my code if required but there's nothing much in there, just a float: right for DIV2 and a couple of margins, background colours, padding values etc.

Giblet · 10-05-2011 7:19pm

clear:both on the blockquote or width:auto?

Pepe LeFrits · 10-05-2011 7:30pm

hmm, no, clear:both forces the blockquote down the page under div2 while width:auto doesn't seem to have any effect (which I thought it would - seems like the right idea... why wouldn't it make the blockquote resize to fill whatever space was available?).

Thanks though

Giblet · 10-05-2011 8:40pm

Hrmm well, you can make it an inline element, it will float to the left until the content is too wide, then it will go to the next line.

Do you need to float Div2

Fanny Cradock · 10-05-2011 8:42pm

Why not post the code?

Giblet · 10-05-2011 9:04pm

<!DOCTYPE html>
<html>
<head>
<style>
blockquote
{
	border:1px solid;
	display:block;	
	overflow:auto;
}

body
{
	width:400px;

}

.right
{

	width:200px;
	border: 1px solid #ccc;	
	float:right;
}
</style>
</head>
<body>

<div class="right">Cras gravida fermentum rhoncus. Proin ipsum augue, consequat non rutrum sed, tempus eleifend mauris. Phasellus 

tempus eros vel nisi ultrices commodo iaculis nunc lacinia..</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<blockquote>
Pellentesque ac lore mauris</blockquote>
</body>
</html>

Pepe LeFrits · 11-05-2011 9:13am

Great stuff Giblet, I'll give that a bash when I get home. Should work considering there's nothing fancy in my code and I can see it does the trick.

Pepe LeFrits · 11-05-2011 6:26pm

Works a charm. Thanks a mill.

Giblet · 11-05-2011 6:47pm

Awaiting my kiss

Small CSS problem driving me bananas - help!

Comments