Css - how can i set block of text and image together?

HTML & CSS
1

hello
again with my PSD, this time I try to set three block of text in one line, (the three block of text under the flower image) , but i don’t know how can’i do that !!
this what i try to do but no effect :

<html>
     <head>
           <link rel="stylesheet" type="text/css" href="./css/styles.css"/>
           <style>
@font-face
{
    font-family: 'PlantagenetCherokee';
    src : url("./fonts/Plantagenet Cherokee.ttf") format("truetype");
}
body , html{
    height : 100%;
    width : 100%;
    margin: 0;
    padding :0;
}
body
{
    height : 1600px;
    width : 100%;
    background-color : #d0d0d0;
    padding : 0 20px;
    box-sizing : border-box;
}
* , *::before , *::after 
{
    box-sizing : inherit;
}
.container 
{
    background-color : #ffffff;
    border-top : 10px solid #894aa3;
    border-bottom : 55px solid #444444;
    height : 100%;
    width : 100%;
    margin: 0;
    /*padding : 0 30px;*/
    position : relative;
}
.search
{
    position: absolute;
    right : 58px;
    top : 0;
    width : 188px;
    height: 28px;
    border : 0px;
    background-color: #ebebea;
    border-radius: 0 0 0 7px;   
}
.iconSearch
{
    background-color : #ebebea;
    background-image : url("../img/searchIcon.png");
    background-repeat: no-repeat;
    background-size : 15px 15px;
    background-position: center;
    width : 28px;
    height : 28px;
    border-radius: 0 0 7px 0;
    position : absolute;
    top : 0;
    right : 30px;
    border : 0;
    
}
/* text is bold by default */
.utopic-flowers
{
    font-family: 'PlantagenetCherokee' , serif;
    color : #666666;
    margin-left : 30px;
    margin-top: 35px;
    background : none;
    text-transform : uppercase;
}
.utopic-flowers span
{
    font-size : 55px;
    color : #666666;
}
.utopic-flowers2
{
    font-family: Arial, Helvetica, sans-serif;
    color : #999999;
    font-size : 12px;
    text-transform : capitalize;
    position : absolute;
    left : 30px;
    top : 95px;
}
.navbartop
{
    opacity: 1;
    position : absolute;
    top : 82px;
    right :0;
}
.navbartop li
{
    display: inline-block;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size : 14px;
    color : black;
    padding-right: 30px;
    text-decoration : none;
}
.navbartop li a
{
    text-decoration : none;
    color : black;
}
.headerText
{
    margin-top : 20px;
    width : 100%;
    height : 100px;
    background-color :#ebebea;
    display : block;
    margin : 0 auto;
    margin-top :45px;
}
.headerText p
{
    width : 70%;
    font-style : italic;
    font-size : 18px;
    text-align : center;
    vertical-align:  center ;
    margin : auto auto;
    padding : 25px 0;
    
}
.headerText p::before
{
    /* is not the same quote in the template. */
    content : open-quote;
}
.headerText p::after
{
    content : close-quote;
}

.bigimgcontainer
{
    height : 380px;
    width : 100%;
    overflow : hidden;
    position : relative;
    border : 0;
}
.bigimgcontainer img
{
    display: block; 
    position : absolute;
    top : 50%;
    left : 50%;
    min-height: 100%;
    min-width: 100%;
    max-width : 960px;
    max-height : 380px;
    transform: translate(-50%, -50%);

}
.comment
{
    background-color : #0f0f0f;
    opacity : 0.5;
    z-index: 1;
    height : 120px; 
    width : 450px;
    position : absolute;
    right : 0;
    bottom : 0;
    text-align : center;
}
.comment p
{
    width : 80%;
    margin : auto auto;
    font-size : 18px;
    font-style : italic;
    color : white;
    vertical-align : middle;
    /* can't center text verticaly , this is whhy i use padding  */
    padding : 25px 0;
}
.leftarrow
{
    background-image: url("../img/arrow.png");
    position : absolute;
    max-height: 50px;
    max-width: 50px;
    height: 50px;
    width: 50px;
    top : 45%;
    left : 30px;
    z-index: 1;
}
.leftarrow:hover
{
    background-image: url("../img/arrowhovered.png");
    position : absolute;
    max-height: 50px;
    max-width: 50px;
    height: 50px;
    width: 50px;
    top : 45%;
    left : 30px;
    z-index: 1;
}
.rightarrow
{
    background-image: url("../img/arrow.png");
    position : absolute;
    max-height: 50px;
    max-width: 50px;
    height: 50px;
    width: 50px;
    top : 45%;
    right : 30px;
    z-index: 1;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: flipH();
    -ms-filter: "FlipH";
}
.rightarrow:hover
{
    background-image: url("../img/arrowhovered.png");
    position : absolute;
    max-height: 50px;
    max-width: 50px;
    height: 50px;
    width: 50px;
    top : 45%;
    right : 30px;
    z-index: 1;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: flipH();
    -ms-filter: "FlipH";
}
.containertext
{
    margin : 30px 50px;
    width: 40%;
    position : relative;
    display : inline-block;
}
.containertext img
{
    height: 48px;
    width : 48px;
    left : 0;
    position: absolute;
    margin-right: auto;
    vertical-align: top;
}
.containertext .containerparag
{
    font-family: Arial, Helvetica, serif;
    top : 0;
    left: 60px;
    position : absolute;

}
.containertext .containerparag .title
{
    color: #894aa3;
    font-size: 20px;
}
.containertext .containerparag .parag
{
    position : absolute;
    top : 50px;
    width: 250px;
}
footer span.left
{
    left : 30px;
    position : absolute;
    bottom : -30px;
    color : #d0d0d0;
    font-size : 13px;
}
footer span.right 
{
    right : 30px;
    position : absolute;
    bottom : -30px;
    color : #d0d0d0;
    font-size : 13px;
}           </style>
     </head>
<body>
<div class="container">
    <header>
        <form>
            <input class="iconSearch" type="submit" value=""/><input class="search" type="text"/>
        </form>
        <h2 class="utopic-flowers">
            <span>u</span>topic <span>f</span>lowers
        </h2>
        <span class="utopic-flowers2">free PSD webSite template</span>
        <ul class="navbartop">
            <li><a href="#">home</a></li>
            <li><a href="#">style demo</a></li>
            <li><a href="#">full width</a></li>
            <li><a href="#">dropdown</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">gallery</a></li>
        </ul>
        <div class="headerText">
            <p>Veniam ipsum laboris adipisicing anim aliquip occaecat qui amet exercitation dolor culpa. Voluptate
                excepteur pariatur adipisicing cupidatat exercitation occaecat do consequat culpa ea duis proident.</p>
        </div>
    </header>
    <div class="bigimgcontainer">
        <img src="./img/flower.jpg"/>
        <div class="comment">
            <p>ipsum laboris adipisicing anim aliquip occaecat qui amet exercitation dolor culpa. Voluptate
                excepteur</p>
        </div>
        <a href="#" class="leftarrow"></a>
        <a href="#" class="rightarrow"></a>
    </div>
    <div class="containertext">
        <div class="img">
            <img src="./img/miniflower.jpeg">
        </div>
        <div class="containerparag">
            <span class="title">
                        Lorem ipsum dolor
            </span>
            <div class="parag">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi at distinctio dolores harum id
                illo maiores, nisi nostrum nulla, numquam officiis optio.
            </div>
        </div>
    </div>
    <div class="containertext">
        <div class="img">
            <img src="./img/miniflower.jpeg">
        </div>
        <div class="containerparag">
            <span class="title">
                        Lorem ipsum dolor
            </span>
            <div class="parag">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi at distinctio dolores harum id
                illo maiores, nisi nostrum nulla, numquam officiis optio.
            </div>
        </div>
    </div>
    <div class="containertext">
        <div class="img">
            <img src="./img/miniflower.jpeg">
        </div>
        <div class="containerparag">
            <span class="title">
                        Lorem ipsum dolor
            </span>
            <div class="parag">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi at distinctio dolores harum id
                illo maiores, nisi nostrum nulla, numquam officiis optio.
            </div>
        </div>
    </div>
    <footer>
        <span class="left">CopyRight 2013 - All Rights Reserved - Domain Name</span>
        <span class="right">Template by OS Template</span>
    </footer>
</div>
</body>
</html>

thank you for taking a look on the code guys.

2

use span tag

3

Using position:absolute like this is not appropriate, and (as you’ve found) can cause all kinds of issues.

Comment out all this:

.containertext img
{
    height: 48px;
    width : 48px;
    left : 0;
    position: absolute;
    margin-right: auto;
    vertical-align: top;
}
.containertext .containerparag
{
    font-family: Arial, Helvetica, serif;
    top : 0;
    left: 60px;
    position : absolute;

}
.containertext .containerparag .title
{
    color: #894aa3;
    font-size: 20px;
}
.containertext .containerparag .parag
{
    position : absolute;
    top : 50px;
    width: 250px;
}

and then change the rules for .containertext so that three blocks will fit on the same line. (You have it set to 40%, which is clearly not going to work. )

Something like this should work:

.containertext
{
    margin : 30px 5px;
    width: 30%;
    position : relative;
    display : inline-block;
}

That gives you a start to work from, and you can add back in those rules from the commented-out section which are still required - colours, fonts, etc.

A better solution might be to look into display:table.
https://tympanus.net/codrops/css_reference/display/
https://css-tricks.com/almanac/properties/d/display/

Generally speaking, if you’re trying to use position:absolute to control page layout, you’re doing something wrong.

That would not be appropriate here, as you can see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

1 Like
4

Hi,

Technobear has given you some hints on how to make 3 across but I will address some very basic (and extremely critical) css errors that have crept into your code despite my giving you the perfect template to start with :slight_smile:

It’s good that you are soldiering on your own but you have made some ultimately destructive css errors in your page.

I’ll treat them in turn:

body {
	height : 1600px;
	width : 100%;
}

Never ever give the body a pixel height as that is never going to be an answer to anything. You can give it a 100% height as in my example (assuming html element is also 100%) but apart from that never ever give it a pixel height or any other percentage height.

The reason for this is that 1600px is a magic number and magic numbers should be avoided wherever possible. What this means is that you have plucked 1600px out of the air because it seems to be a height that you want for that page but heaven forbid that anyone should zoom their text or if you ad or remove content or if some browsers display the page higher or lower due to lines wrapping or when you resize the page smaller and the layout gets taller, or other pages using the same css have different heights and so on and so on… The bottom line is never do this.

What you should do is have an auto height (no need to do anthing at all) and let the content fill the container as required. Easy :slight_smile:

In my example I gave a 100% height effect where the black border is at the bottom of the viewport when no content is present but would follow the document when content is greater than viewport height. However it seems that you now want the black line to be a footer element with content inside so you can’t use the border approach and still place content inside it. You need the sticky footer version of my layout to do this if you want the 100% effect. If you just want a footer at the bottom of the content then remove the bottom border and use a normal element as the footer. No need for heights on it either because you can’t possibly know what height it will be when content wraps. Just leave it at auto height (the default).

.container {
	background-color : #ffffff;
	border-top : 10px solid #894aa3;
	border-bottom : 55px solid #444444;
	height : 100%;
	width : 100%;
	margin: 0;
	/*padding : 0 30px;*/
    position : relative;
}

You borrowed part of my code but removed the most vital part. **You removed the display:table ** rule which means that your height:100% on the container now limits the container to only 100%. That means it can never grow and should content extend further than 100% then it will spill out and break the layout. The display:table I added allows the height:100% to be treated as min-height because the auto table layout algorithm always allows the container to expand to contain content. Removing that property will break your layout completely at some stage. The only place you really use height:100% is on the html and body elements and you only do that when you want the first container on the page to be able to use min-height:100%. In all other cases there is no need for height:100% and you will rarely if ever have a need for it as it won;t work as you expect. (I’m ignoring vh units for now as they are a different kettle of fish but again you would unlikely use a fixed vh height unless you knew the implications).

.headerText {
	margin-top : 20px;
	width : 100%;
	height : 100px;
	background-color :#ebebea;
	display : block;
	margin : 0 auto;
	margin-top :45px;
}

Similar mistake again here where you have set a height of 100px for the header but that clearly does not work and I already gave you an exact example of this. As soon as you resize the window the text wraps and spills out of the 100px and overlaps everything else. Once again do not give height to elements that hold fluid content like text. Just let the content dictate the height and if you want an initial height you can always use min-height but more often than not you can just add some top and bottom padding and let the text control the height at every stage. It’s a simple concept and works forever. Just let content dictate the height and don;t force stuff into fixed height containers unless there is a specific reason for it and you have accounted for any implications in doing so.

Your navigation in the header overlaps the logo when the screen is resized. Look at my example and see how it avoids the header using media queries and avoiding any fixed heights on the header.

.bigimgcontainer {
	height : 380px;
}

Assuming this is for a slider or just an image as I can’t see your images then height:380px may be ok in this instance especially if its a slider. However if its just an image then you probably should be letting the image height dictate the containers height and have the image grow and shrink with the viewport. Of course this does depend on what you are doing and if you want a fixed height image then a background image would be better.

Try to think ahead and if you are using a third party slider then make sure it is of the responsive variety.

.comment {
	background-color : #0f0f0f;
	opacity : 0.5;
	z-index: 1;
	height : 120px;
	width : 450px;
	position : absolute;
	right : 0;
	bottom : 0;
	text-align : center;
}

Same problem again with a fixed height and if someone zooms text only or you add more content or you try to make it responsive then it all breaks. Remove the height and let content dictate the height.

I can’t re-iterate this enough that if you continually set heights for things that don’t need height then the site will break all the time and be unusable or un-maintainable. Remember you have virtually no control over the width or height of the device that views your content an no control over text size, text width or anything else that the user may have changed on their machine. You have to code with this in mind and maintain fluid and accommodating containers for anything that is likely to contain fluid content like text.

Only use absolute positioning in controlled situations where their use doesn’t interfere with the flow of the page. Absolute elements are removed from the flow so when you use them you have to make sure nothing else is in the way or will ride over them when content changes (as when opening or closing the browser window). Generally you will not use absolute positioning for structured layout elements but for little things like your search input that is tucked out of the way at the top and protected by padding/margins on the elements around it.

Where’s your doctype?

I know some people omit html when pasting in here but never create a page without a doctype or you will be coding in quirks mode and all bets are off when you do that.

Where’s the viewport meta tag?

I know you may have omitted it for brevity in here but you must include the viewport meta tag otherwise mobile devices will not render the page as you expect or want (see my example for the correct viewport meta tag to use).

I think that’s enough for you to get on with but I don’t want to see these errors re-occurring especially as I gave you a template without any of those things in place :slight_smile: (I’m beginning to sound like an old school teacher now ;))

3 Likes
5

thank you very much @TechnoBear , i get the result by this code :

.media {
    display: inline-block;
    width: 30%;
    position: relative;
    margin: 50px 10px;
    padding-right: 0;
    padding-left: 30px;
}

.media_image, .media_body {
    display: table-cell;
    /*vertical-align: middle;*/
}

.media_top {
    vertical-align: top;
}

.media_bottom {
    vertical-align: bottom;
}

.media_image {
    padding-right: 20px;
}

.media_image img {
    display: block;
    max-width: none;
    height: 48px;
    width: 48px;
    vertical-align: top;
}

.flag--rev {
    padding-right: 0;
    padding-left: 10px;
}

.media_body {
    width: 100%;
}

.media_body .title {
    color: #894aa3;
    font-size: 25px;
    margin: 30px auto;
}

.media_body p {
    color: #666666;
    font-size: 20px;
}

and thank you @PaulOB for taking time and read the code above , now i’m on the way to do what you mentioned above but i have some problem :frowning:
the first is when i try to do the difference between height 100% and diplay : table , but i don’t see the difference by this code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>



        body , html{
            height : 100%;
            width : 100%;
            margin: 0;
            padding :0;
        }
        body
        {
            height : 100%;
            width : 100%;
            background-color : #d0d0d0;
            padding : 0 20px;
            box-sizing : border-box;
        }

        * , *::before , *::after
        {
            box-sizing : inherit;
        }
        .container
        {
            background-color : #ffffff;
            border-top : 10px solid #894aa3;
            /*height : 100%;*/
            width : 100%;
            margin: 0;
            display : table;
            position : relative;
        }

        .iconSearch
        {
            background-color : #ebebea;
            background-image : url("../img/searchIcon.png");
            background-repeat: no-repeat;
            background-size : 15px 15px;
            background-position: center;
            width : 28px;
            height : 28px;
            border-radius: 0 0 7px 0;
            margin : 0 30px auto auto;
            float : right;
            border : 0;

        }

        .search
        {
            margin: 0;
            float : right;
            width : 188px;
            height: 28px;
            border : 0px;
            background-color: #ebebea;
            border-radius: 0 0 0 7px;
        }

    </style>
</head>
<body>
<form>
    <div class="container">
        <header>
            <form>
                <input class="iconSearch" type="submit" value=""/><input class="search" type="text"/>
            </form>
            <h2 class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </h2>
            <span class="utopic-flowers2">free PSD webSite template</span>
            <ul class="navbartop">
                <li><a href="#">home</a></li>
                <li><a href="#">style demo</a></li>
                <li><a href="#">full width</a></li>
                <li><a href="#">dropdown</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">gallery</a></li>
            </ul>
            <div class="headerText">
                <p>Veniam ipsum laboris adipisicing anim aliquip occaecat qui amet exercitation dolor culpa. Voluptate
                    excepteur pariatur adipisicing cupidatat exercitation occaecat do consequat culpa ea duis proident.</p>
            </div>
        </header>
    </div>
</form>
</body>
</html>

the second is : why the search input have margin top by default and the submit input don’t have like . this :

626×116 1.04 KB

, i know i can fix it by adding vertical-align :top but i’m just curious.
the third is when i try to add margin-bottom from an floating tag (or margin-top of the div under the floated element) i know in css spec we have this :

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist

but the problem is when it still not working despite i add a wrapper of head tags (inside this wrapper i have a wrapper for title element and a list ), and also if i don’t use the clear : both property i have the following result :

2470×286 48 KB

the text is positioned between the floated element (the title wrapper and list).
this is the result :

<html>
<head>
    <link rel="stylesheet" type="text/css" href="./css/styles.css"/>
    <style>
         @font-face {
    font-family: 'PlantagenetCherokee';
    src: url("./fonts/Plantagenet Cherokee.ttf") format("truetype");
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
    width: 100%;
    background-color: #d0d0d0;
    padding: 0 20px;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

.container {
    background-color: #ffffff;
    border-top: 10px solid #894aa3;
    /*border-bottom : 55px solid #444444;*/
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
    /*padding : 0 30px;*/
    position: relative;
}

.formwrapper {

    float : right;
    margin : 0 30px auto auto;
}

.iconSearch {
    background-color: #ebebea;
    background-image: url("../img/searchIcon.png");
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: center;
    width: 28px;
    height: 28px;
    border-radius: 0 0 7px 0;
    border: 0;
    padding: 0;
    display : inline;

}
.search {
    width: 188px;
    height: 28px;
    border : 0px;
    background-color: #ebebea;
    border-radius: 0 0 0 7px;
    padding : 0;
    display : inline;
    /*vertical-align : top;*/
}

/* text is bold by default */


.wrapperheader
{
    display : inline;
    float : none;
}
.titlewrapper
{
    margin-left: 30px;
    margin-top: 35px;
    float : left;
    display : block;
}

.utopic-flowers
{
    font-family: 'PlantagenetCherokee', serif;
    color: #666666;
    font-size : 30px;
    text-transform: uppercase;

}

.utopic-flowers span
{
    font-size: 45px;
    color: #666666;
}

.utopic-flowers2 {
    font-family: Arial, Helvetica, sans-serif;
    color: #999999;
    font-size: 12px;
    text-transform: capitalize;
    margin-top : -5px;
    display : block;
}

.navbartop {
    border : 1px solid red;
    display : inline-block;
    float : right;
}

.navbartop li {
    display: inline-block;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: black;
    padding-right: 30px;
    text-decoration: none;
}

.navbartop li a {
    text-decoration: none;
    color: black;
}

.headerText {
    width: 100%;
    min-height: 100px;
    background-color: #ebebea;
    display: block;
    margin: 45px auto 0 auto;
    display : block;
    border : 1px solid red;
}


.headerText p {
    width: 70%;
    font-style: italic;
    font-size: 18px;
    text-align: center;
    vertical-align: center;
    margin: auto auto;
    padding: 25px 0;

}

.headerText p::before {
    /* is not the same quote in the template. */
    content: open-quote;
}

.headerText p::after {
    content: close-quote;
}

    </style>
</head>

<body>
<div class="container">
    <!-- header -->
    <div class="formwrapper">
        <form>
            <input class="search" type="text"/><input class="iconSearch" type="submit" value=""/>
        </form>
    </div>
    <div class="wrapperheader">
        <div class="titlewrapper">
        <span class="utopic-flowers">
            <span>u</span>topic <span>f</span>lowers
        </span>
            <span class="utopic-flowers2">free PSD webSite template</span>
        </div>

        <ul class="navbartop">
            <li><a href="#">home</a></li>
            <li><a href="#">style demo</a></li>
            <li><a href="#">full width</a></li>
            <li><a href="#">dropdown</a></li>
            <li><a href="#">portfolio</a></li>
            <li><a href="#">gallery</a></li>
        </ul>
    </div>
    <div class="headerText">
        <p>Veniam ipsum laboris adipisicing anim aliquip occaecat qui amet exercitation dolor culpa. Voluptate
            excepteur pariatur adipisicing cupidatat exercitation occaecat do consequat culpa ea duis proident.</p>
    </div>
    <!-- end header -->
</body>
</html>

thank you very much guys @PaulOB your advices are very helpful.

1 Like
6

You removed the height:100% so now the page is only content high and in that case the display:table is superfluous. However you have also wrapped a from element around the page which means the height:100% would not work anyway as the form element is auto height and you can’t base a percentage height on an auto height element.

<form>
    <div class="container">
        <header>
            <form>
                <input class="iconSearch" type="submit" value=""/><input class="search" type="text"/>
            </form>

You have also nested an inner form which is invalid also as forms can’t be nested (for obvious reasons). If you only want one form on the page then do not nest other form tags inside. Also if the form element is the page wrapper and you also wanted the 100% high effect then that form wrapper would need to be the page container and have the 100% height routines applied to it. Of course we could use the vh unit for the container instead and that would work in modern browsers (height:100vh).

The real test of the effect of the display:table and height:100% can be seen in a proper demo when you leave the height:100% but remove display:table.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html, body, .wrap {
	height:100%;
	margin:0;
	padding:0;
}
.wrap {
	width:100%;
	background:red;
	display:table;/* remove me to see the difference*/
}
</style>
</head>

<body>
<div class="wrap">
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>content to fill the viewport</p>
  <p>The end</p>
</div>
</body>
</html>

  1. Image with display:table applied.

    937×772 98.9 KB

  2. Image without display:table applied.

1437×762 211 KB

As you can see from image 2 the container no longer has a red background which means that the content has overflowed the container because it has been limited to an initial 100% only and not allowed to grow to accommodate content that has gone below the fold.

Also why have you used an h2? **

There is no h1 on the page so you cannot use an h2**. Heading tags have a hierarchy and must be used in order. I gave you an example and showed that it should be an h1 as it is the main point of that page.

You once again missed the doctype so I am assuming that you still haven’t included them into your page. I don’t want to see any more snippets without the correct doctype in place or I will disregard the code as invalid.:slight_smile:

Also please run your code through the validator as all the snippets you are posting are badly formed. This is not me being awkward but because the validator is one of the greatest tools for helping you with your css even if you don’t understand it at first :slight_smile:

There is a lot to take in for that one slight question and requires a good depth of knowledge to understand so may not make sense to you until you go away and play around with it for a few days :slight_smile:

Your demo doesn’t show the same as that screenshot and I’m guessing you are showing a picture of a form input where you have floated one input and absolutely placed the other one. If you float both as in your demo then they will both have a 1em top margin caused by a top margin-collapse from your h2 collapsing onto the header element and moving it down by 1em. (Remember where I told you you had to control the margins carefully on all the elements you use).

Collapsing margins are also a complicated subject so spend a few hours googling them as a lot of advanced users still get it wrong also :slight_smile:

Why have you declared your headerwrapper as display:inline? That makes no sense so remove it. It has nothing to do with the float problem as such but is just a little piece of nonsense that has crept in. You can’t really have an inline display element holding block display content because it will serve no purpose and has no real meaning.

Assuming your headerwrapper is returned to display:block (its default) then the content of headerwrapper is 2 floats only. Floats are removed from the flow so headerwrapper will effectively have a height of zero. If you want the floats to be contained inside headerwrapper then you need to use a float containment technique suc h as overflow:hidden applied to header wrapper or one of the old clearfix techniques (I’ll let you google those as the research will do you good ;)).

Once you have contained the floats then you won’t need to put a clear:both on headerText because the floats have already been contained. If the headerwrapper div was not in place then you would need clear:both on headerText as you already acknowledged otherwise following text will wrap around the float.

Note that margins on static content that follows a non contained float will not refer to the float above but will refer all the way back to the containing block which may well be half way up the page so the margin will appear to have no effect.

Float clearing and float containment is another tricky subject that cannot be grasped without research and testing.

As I said there’s a broad range of subjects here and I don’t expect you to grasp them straight away which is why I recommend you take some time to study and look up specific points I mention. I find I always learn best when I practice with the code until I see that it matches the specifications of what it should be doing. Sometimes the misunderstanding is simply because the properties concerned have more complicated behaviours than expected.

2 Likes
7

ok i gonna do next time , and thank you very much for taking time and responding me , also i gonna googling on the subjects above.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.