CODEWITHSUNDEEP
htmlcssimage
Basem Fouda
Basem Fouda

Reputation: 113

how to put an img under a header(div) that contains other divs?

I put a header which contains three divs. One has an image and the other two contain text.I then tried putting an image under it which has the same width of the header. But when I first put it, it was over the header div( I thought it should go under it). I then tried pushing it down by increasing the top margin and it worked. But as I increase the width of it the text in the header moves although it is not touching it!

This is the html code:

    <div id="header">
        <img id="logo" src="....">   <!---the logo at the top right--> 
        <div id="name">JANE DOETTE<div>  <!---the text that moves - top left -->
        <div id="job">Front-End Ninja</div>  <!--under the text that moves but doesn't move--->
    </div>

    <img id="image" src="....">  <!---the image-->

This is the css code:

#header {
    height: 6em;
    width:80%;
    background-color: white;
    margin-left:10%;
    margin-right:10%;
    border-bottom:2px solid #BCBBBB;
    margin-bottom:10px;
}

#image{
    margin-left:10%;
    margin-right:10%;
    height:10em;
    width:80%;
}

#logo {
    height:88px;
    width:89px;
}

#name {
    color: #BCBBBB;
    text-align:left;
    float:right;
    font-size:2.7em;
    font-family:sans-serif;
    height:50%;
}

#job {
    color: #BCBBBB;
    text-align:left;
    float:right;
    font-size:0.5em;
    font-family:sans-serif;
    font-weight:bold;
    margin-top:0.2em;
}

Those are my questions:

  1. Why doesn't the image automatically go under the header div?

  2. Why does the text move?

  3. Why is the top text the one that moved although the one at the bottom is nearer to the image?

  4. What should I do to get the image under the heading div?

  5. I adjusted the width of the image to 80%. But it seems to be just 20%. Why?

  6. Has it got anything to do with position or display?

***Sorry for not adding an image of it but I don't have a reputation of more than 10 ( I am not allowed to).

***Sorry for the long questions.( I am still a beginner).

***Your answers would be much appreciated.

Upvotes: 1

Views: 72

Answers (2)

Martijn Deibel
Martijn Deibel

Reputation: 26

Your question isn't all that clear (please clarify), I will try to answer regardless, but I might misrepresent your question.

1 / 6 . The biggest problem you have I think is that you don't tell the browser how to 'order' the divs. Should they be under eachother or next to eachother? Use the "display" property for this. Use "display: block" to make sure that page-elements like divs or images are stacked under eachother. Depending on the margin the browser uses the remaining space to stack elements next or above eachother.

2 / 3. Because it floats. A float is relative to other elements on the page. If you make it float right, but the content within it align to the left the box goes left while the content within it stays as far to the left as it can keeping with the contraints of the div container. Therefore it seems to move. Lose the float and use "display: block" to make the div be the full width of the header div.

#name {
    color: #BCBBBB;
    text-align:left;
    font-size:2.7em;
    font-family:sans-serif;
    height:50%;
    display: block;
    padding-left: 10px;
}

4 / 5 . Lose the "height" property of the image. Because the image has a relative 'height' property next to a relative 'width' property it distorts the image scaling. Use only the width as a percentage and it will scale proportionally.

Upvotes: 1

aleju
aleju

Reputation: 2386

You are missing a slash. Instead of

<div id="name">JANE DOETTE<div>

it should be:

<div id="name">JANE DOETTE</div>

After adding the slash it appears fine to me in Chrome and Firefox (except for the missing images obviously). See fiddle. Does that solve all of your questions?

Upvotes: 1

Related Questions