/    Sign up×
Community /Pin to ProfileBookmark

div acting weird

Copy linkTweet thisAlerts:
Jan 04.2008

Hi

I have a div element containing an image and some text.
The image is floated to the left of the text, but is somewhat higher than the text.

For some reason the div (i noticed by the background color) finishes right after the text, inline with the text, and continues inline with the image until It ends.

This causes a sort of stepped appearance of the div’s background color.

Why does this happen?

Here are the code parts:
HTML:

[CODE]
<div class=”container” id=”divPack”>
<h5>GIFT PACKAGING</h5>
<img class=”img2″ src=”someimage.jpg” />
<p>Some Text</p>
</div>
[/CODE]

CSS:

[CODE]
.container {
width:660px;
margin:0px;
background-color:#d0c5ac;
margin-top:20px;
padding:10px;
padding-top:20px;
overflow:visible;
visibility:visible;
z-index:3;
}

.img2 {float:left; margin:8px; margin-bottom:20px}
[/CODE]

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@BrettNooyenJan 04.2008 — What are the dimensions of the image you are using and/or can you provide it?
Copy linkTweet thisAlerts:
@jamesm6162authorJan 04.2008 — Well it happens with 3 different images on my site in a similar structure. I actually did solve the problem by setting a fixed height for the div each time, and not just letting it resize depending on content, but i was wondering why it happened.

I guess I can provide the dimensions. I'll see if it makes a difference.

The one image in question was 300X328
Copy linkTweet thisAlerts:
@jamesm6162authorJan 04.2008 — Oh I also noticed that it only occurred when I set the float css attribute.
Copy linkTweet thisAlerts:
@jamesm6162authorJan 04.2008 — No the dimensions actually didn't work

I set them using both CSS and html respectively but it didn't solve the problem.
Copy linkTweet thisAlerts:
@CentauriJan 05.2008 — To force a container to surround internal floats, the overflow property needs to be set to anything [B]other[/B] than "visible" (the default) :[CODE].container {
width:660px;
margin:0px;
background-color:#d0c5ac;
margin-top:20px;
padding:10px;
padding-top:20px;
overflow:[COLOR="Red"]hidden[/COLOR];
visibility:visible;
z-index:3;
}[/CODE]
Copy linkTweet thisAlerts:
@jamesm6162authorJan 05.2008 — Wow for some reason that solved it.

Thanks so much for the help

cheers!
×

Success!

Help @jamesm6162 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...