ansaurus

Question

Answer 1

A:

Wrap the iframe in a div to handle the iframe position. Reduce the div's padding to 0.

2009-04-12 21:04:33

Answer 2

+2 A:

If you float the iframe to the right of the ul, then the content of the ul will be able to fill the full width when it is removed (or the display style is set to none). Since altering the visibility style does not affect layout, changing that will accomplish nothing.

<div>Header</div>
<iframe src="http://www.google.com/" style="width:80%;float:right">
</iframe>
<ul>
  <li>Left column / main column</li>
  <li>A list</li>
  <li>of things</li>
</ul>

Shog9 2009-04-12 21:11:21

This will almost make it work. but the problem is that the ul is 100% of the site even when the iframe is on the site.<ul style="background-color: Yellow;">The yellow take width: 100%

Christian Johansson 2009-04-12 21:26:00

Yes. But the content of the ul will not take up the full width.

Shog9 2009-04-12 21:33:52

Answer 3

A:

Maybe this will clear some things.

I want the site look like the example below. But the li borders should stop at 80% when the iframe is on the site. But when the site doesn´t render the iframe the li border should stop at 100%.

I can do this by changing the style when I'm not render the iframe. But it would be nice if I can do this in pure css.

Im sure this is possible and thats why I want to do it this way.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Test</title>
</head>
<body>
<div>Header</div>
<iframe src="http://www.google.com/" style="width:20%;float:right">
</iframe>
<ul>
  <li style="border: solid 1px Yellow;">Left column / main column</li>
  <li style="border: solid 1px Yellow;">A list</li>
  <li style="border: solid 1px Yellow;">of things</li>
</ul>
</body>
</html>

Christian Johansson 2009-04-12 21:47:18

Of course you can implement this quite easily using tables, although using tables for layout is discouraged.

Perspx 2009-04-12 22:53:25

Also, this data would have been better put in the question: see the "edit" link.

Kent Fredric 2009-04-12 22:55:30

O sorry, this was my first post. I will learn to use the edit link.

Christian Johansson 2009-04-13 16:07:43

Answer 4

A:

I solved it. By setting overflow:auto on the ul element!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Test</title>
</head>
<body>
<div>Header</div>
<iframe src="http://www.google.com/" style="width:20%;float:right">
</iframe>
<ul style="overflow: auto;">
  <li style="border: solid 1px Yellow;margin: 5px;">Left column / main column</li>
  <li style="border: solid 1px Yellow;margin: 5px;">A list</li>
  <li style="border: solid 1px Yellow;margin: 5px;">of things</li>
</ul>
</body>
</html>

Christian Johansson 2009-04-13 16:36:48

ansaurus

tags:

views:

answers:

div Side by side with a twist

related questions