Display and float

HTML & CSS
1

Hi again,

I have been reading lots of papers about these two properties, and I still have some troubles.

When I wrap using (for instance) a div, and I have inside a p and a div, is it any kind of inheritage?
I mean, how float and display properties for wrapping division affects the internal p and div elements?

What should I define in the wrapping element, and what in the internals?

Thanks a lot!!

2

in i understand your question correctly, the answer is NO. the float attribute is not inherited ( mast attributes aren’t , if you give a div border:10px solid pink; , Ps inside it will not also have a border.) Yo don’t have to worry about child elements.

Do note that a container contains. So all children will move with their parent.

ALSO. Here is something a lot of novice coders miss, you do need to consider the PARENT of the floated element.

<div class=“parent”><div class=“float”><p > content and stuff</p></div><div>

.parent{background: pink;}
.float{float: left}

in that example, your pink bg would not show up! The thing that is happening is that floats are taken out of the normal flow. so as far as it’s concern div.parent thinks it’s empty! To fix this you need to clear the float some how. here are many methods of float clearing but by far the most graceful and simple to use to add overflow:hidden; like so:
.parent{background: pink; overflow:hidden;}

hope that helps

3

Hi again :slight_smile:

Let’s say I have a div element containing:

  • a div element (for text, having inside an h2 title and some p paragraphs),
  • and a p element (for a picture)

In terms of display (inline or block) and float (left or right), where should I define these properties in order to have text box on the left and picture on the right side?

Is it any suggested way to do this when you are dealing with elements wrapping elements?

Thanks a lot!!

4

could you post the code itself… that has A LOT to do with how you would do your CSS.

Is it any suggested way to do this when you are dealing with elements wrapping elements?

ALWAYS code semantically first. don’t think of what its going to look like, think of what the content is supposed to mean.

Simple example:


<div class="contain">
   <div class="text">
        <h2> Your headline</h2>
        <p>text</p>
        <p>text</p>
        <p>text</p>
        <p>text</p>
    </div>
<div class="images"><img src="#"/></div>
</div>

.contain{overflow:hidden;}
.text {float:right; width:80%} /* you must give the floated element a width!!*/
.images {float:left; width:20%} /* this could be optional depending on the rest of your code and intent */

by the way, the reason why you must give a floated item a width is because floats shrink-wrap to fit the width of their content, by default. however, if their content has a width that’s >+ 100% the width of the parent then the float will have a width of the parent. What happens is if you have TWO float’s whose TOTAL width add up to more than 100% then the one that appears later in the HTML code will drop.

In short, make sure that the sum of the calculated width ( width+ padding+margin) of floated elements you want to appear side by side is <= 100%.