Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

wanted: layer to affect layout of some content, but not all 1

Status
Not open for further replies.
Ghodmode

Ghodmode

Programmer
Feb 17, 2004
177
0
0
NZ
I have a page I'm playing with to help improve my understanding of the differences between browsers.

Here's the page to go along with the following description. This is the entire page and I took screenshots of the page in IE vs. FF and stuck them in there after the fact.

In the upper left-hand corner of this page, I have a [tt]div[/tt] that currently just says HTML in big letters. I may stick some fancy logo there in the future.

A little further down on the same page I have a [tt]div[/tt] with a different color background and a few paragraphs in it.

I want the first [tt]div[/tt] to be on top of the second one, but I still want the paragraphs inside of second one to flow around the first one.

Now, it looks like I want it to in Firefox, but not in IE. When I think about it, though, it seems that IE is rendering the page properly ... Neither [tt]div[/tt] is absolutely positioned and the first one is just [tt]float: left;[/tt]. It makes sense that the entire second [tt]div[/tt] should flow around the first one, not just the paragraphs.

Thank you

--
-- Ghodmode
 
Sort by date Sort by votes
maybe something like this would work
Code: 
<body>
<div style="width: 100px; height: 48px; float: left;background-color:#FDF; border:solid 1px #000">HTML</div>
<center><div style="background-color: #FFE;border-top: solid 10px #FFF;border-left: solid 30px #FFF"><div style="border: solid 1px #000;">
	OHLA<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div></div></center>
</body>
 
Upvote 0 Downvote
Thanks ca4928. I've tried it and it works perfectly in both browsers. However, I'm at a loss as to why it works. shouldn't the second [tt]div[/tt] still flow around the first or, if there's not enough room, under it?

Can anyone explain why this works?

For everyone's reference, I used ca4928s example with my own sample paragraphs. In the source, I did some indentation and stuff, but no actual changes :
--
-- Ghodmode
 
Upvote 0 Downvote
I'm sure ca would do a much better job, but I'll give it a shot.

The first <div> (HTML) is straight forward. Float left sets it in the first available space in the upper lefthand side.
<center> is a depreciated HTML tag (deprecitated HTML 4.01.
and the center element is not supported in XHTML 1.0 Strict DTD)that centers text within the tag.
The
Code: 
<div style="background-color: #FFE;border-top: solid 10px #FFF;border-left: solid 30px #FFF">
places a full width block across the window. By using background-color, one can provide the illusion of offset. For example, try changing the background-colors and you will see what is happening. The <div> within the large div inherits the <center> tag, hence the text is centered. The <br/> extends both divs down vertically.

Hence you are correct, the second div does extend under the first div.

Looking at the validation - you might want to close the <br> ---><br />

Hope this helps,
George
 
Upvote 0 Downvote
I've updated the page:
This is far from done and, as it's only practice, I might not finish it.

I still don't understand why the second [tt]div[/tt] extends below the first one if it contains another [tt]div[/tt]. But if the second [tt]div[/tt] does not contain another [tt]div[/tt], it flows to the right of the first one, or below it if it doesn't fit to the right ... but only in Internet Explorer.

Code: 
div#title {
    float: left;
    font: bold italic 24pt sans-serif;
    line-height: 1em;
    padding: 0 5px 0 1em;
    background: white;
    border: 1px outset #fff;
    border-width: 0 1px 1px 0;
    margin: 0;
}

div#content {
    font: normal 14pt serif;
    border: 2px outset black;
    border-top-width: 1px;
    margin-top: 10px;
    margin-left: 30px;
    margin-right: 30px;
    background: #ffffbb;
    text-align: left;
}

Code: 
<div id="title">HTML</div>
    <div id="content_wrapper">
        <div id="content">
            <p>If I take out the "content_wrapper" div above, this "content" div is pushed below the "title" div in IE.</p>
            <p>With the "content_wrapper" div, this "content" div extends below and only the paragraphs flow to the right of the left-floated "title" div.  This is how it works in Firefox with or without the "content_wrapper" div.</p>
        </div>
    </div>

--
-- Ghodmode
 
Upvote 0 Downvote
Hi Ghodmode,
When i ran your code in IE 6 it works like FF1.5, even when I removed the content_wrapper div...the title is in the upper left corner, with the yellow box extending under the title and down and to the right. the text (first<p>) in the yellow box is to the right of the title, the second <p> is below. Both IE and FF...

George
 
Upvote 0 Downvote
glg1, you're right. I must have identified the wrong thing as the fix. I'm not sure now, but it seems that if I specify the width of the "content" [tt]div[/tt], it forces it to flow below the floated "title" [tt]div[/tt].

Originally, I specified [tt]width: 800px;[/tt] for that block with a left and right margin of auto. That's when it didn't work. So, I guess in ca4928's original solution, the fix wasn't due the intervening [tt]div[/tt], but the fixed borders instead of margin.

In any case, I like the new way better because there's a white margin (actually border) around the content in any size browser window.

--
-- Ghodmode
 
Upvote 0 Downvote
thanks for the star ghodmode. I like the site you put up. I too am a fan of having information tucked in but accessible without leaving the page. navigation - as you have it - is good in that fashion. I think that as people get used to having different modes of navigation, these approaches will become common place. Another piece I'm testing is using lightboxes to have infomation accessible. One thing that I have not seen much of is effective use of layering techniques that the user can click back and forth.



Combining lightboxes and slide-outs might be a nice touch...

Cheers,
George
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
198
spamjim
spamjim
bdwilcox
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
156
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
299
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
156
pmonett
pmonett
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
62
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top