Member Avatar for dominique7

Hi,

I think the problem is simple enough to understand, but if you'd need it, I would set up an example.

I'm quite ok with html and css, but I'm not fully comfortable with "float"

I use it float: left (or right) to produce text colums, but now I got a problem...

I have a portion of text with an image aside. I placed the image like "float: left". I put image and text together in a div box.
The image is bigger than the text. Now, I thought that adding margin to the surounding div-box would separate it from other content (the next box of the same type), but the margin seems to only affect the text while the image touches the other content.
That's probably because of the "float". WHat would you do to have that margin around the whole box respective the image borders?

I'd be really glad if someone could help! :)

Cheers,
Dominique

Edited by dominique7 because: n/a
  • 4 Contributors
  • 5 Replies
  • 197 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by dominique7
Member Avatar for harrierdh

You said you have a div container around the image and the text. And you put a margin around the entire div.

Are you mixing position absolute or relative with floats? Are you sure the div container is truly containing both the image and the text?

Try putting a border on some of your elements like the div. Or better yet get Firebug and debug it.

Because, if the div contains both the image and the text then your margin would work. It sounds like it doesn't.

Member Avatar for dominique7

Thanks for answering, harrierdh!

I hoped there was an easy answer. Yes, the image image and the text really was in the same div box.

Now, as it seemed to not have an obvious solution, I put a border around the box to see it was smaller than the image it contained.
And well... because the whole website- building process takes longer than I hoped for, I simply defined a fixed height for the div-boxes and then removed the border again that worked ok for now.

I'll add this not really solved thing to a list with a few other problems I only have a work-around yet and will look at them once my page is up and running.
Oh, yes I have firebug, but I didn't understand the problem nonetheless.

Cheers,
Dominique

Member Avatar for scottloway

I'm not totally sure I'm following your specific issue, but it sounds a whole lot like you need to set overflow: hidden on the containing <div>. Assuming your floated content is flowing outside of the container, this should help you clear that.

commented: exactly solved my problem +1
Member Avatar for MJ Pieterse

i might be misunderstanding what you are saying, but put padding in your image tag

<img src="../Images/YourImage.jpg" style="float:right; padding-right:10px; padding-bottom:10px;" />
Member Avatar for dominique7

Hey, thanks scottloway and mj080!

I removed the fixed height again to test your suggestions.
The padding around the image didn't make any difference to my problem, but "overflow:hidden" exactly produced what I wanted to look my boxes like (or how they had to behave right from the start in my opinion).
I admit I didn't really understand the tag yet, I'm going to read on it.

Big thanks to everyone who replied and very big thanks to scott!

Cheers,
Dominique

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.