/    Sign up×
Community /Pin to ProfileBookmark

help understanding divs

Copy linkTweet thisAlerts:
Oct 01.2005

Can somebody help clarify some confusion… I’d like to learn CSS layouts. But as many times as I tried, I ran into behaviours I didnt understand and in the end give up and revert to tables.

Test page :

[URL]http://www.crystal-rentals.com/bgbauer/css_test/css_test.html[/URL]

Im viewing this in Firefox.

1) Why in all of the examples, is there red background showing beneath the image?

2) Why in sample 4 does the outter div not contain the image?

3) How, can I for example, have a div size itself to contain a float: left image with text that wraps around the image?

Thanks
Brad

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@NogDogOct 01.2005 — Can somebody help clarify some confusion... I'd like to learn CSS layouts. But as many times as I tried, I ran into behaviours I didnt understand and in the end give up and revert to tables.

Test page :

[URL]http://www.crystal-rentals.com/bgbauer/css_test/css_test.html[/URL]

Im viewing this in Firefox.

1) Why in all of the examples, is there red background showing beneath the image?[/quote]
Try setting "dipslay: block;" for your images.

2) Why in sample 4 does the outter div not contain the image?[/quote]
When you float an element, it is taken out of the normal element flow and thus the containing block element does not reserve space for it.
3) How, can I for example, have a div size itself to contain a float: left image with text that wraps around the image?



Thanks

Brad[/QUOTE]
I usually do something like this:
[code=html]
<style type="text/css">
.clear {
height: 0;
line-height: 0;
font-size: 1px;
margin: 0;
padding: 0;
clear: both;
}
</style>
</head>
<body>
<div class="foo">
<img src="blahblahblah" class="bar">
<p>Some text here....</p>
<div class="clear"></div>
</div>
[/code]
Copy linkTweet thisAlerts:
@drhowarddrfineOct 01.2005 — IE does not understand the xml prologue and will screw up. Remove that first line. Only modern browsers like FF/Opera understand it.
Copy linkTweet thisAlerts:
@LJKOct 02.2005 — Hi -

Since they're divisions, think of baseball - a way to organize a big bunch.

For #3 -

Have a p in the div, place the image within it, set the image to float:left; with some padding to give it cushioning - and add a <br style="clear:both; /> before the end of the p. [Quick, dirty, but should work.]

El
Copy linkTweet thisAlerts:
@Brad_BauthorOct 03.2005 — IE does not understand the xml prologue and will screw up. Remove that first line. Only modern browsers like FF/Opera understand it.[/QUOTE]

It looks the same to me in FF and IE. Except for one nice quirk. IE doesnt show the red below all my images like FF does.
Copy linkTweet thisAlerts:
@Brad_BauthorOct 03.2005 — ok, here is another set of tests.

http://www.crystal-rentals.com/bgbauer/css_test/css_test2.html

1) Why now suddenly does the outter div expand to contain the image? (these are the odd behaviours that never make sense to me)

2) In div#5, I dont like the way the last word wraps down to the far left. So my initial thought is, if I put it in a div (block), shouldnt that then force it to act in a 'square' manner? (example div#6) This works in IE. But in FF the entire div is placed after the image.
×

Success!

Help @Brad_B spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...