Geek Answers Handbook

The problem of getting a div for a hug next to another

I have 6 divs inside a div container. These divs need to be aligned in a certain way for the needs of customers. I took the basic layout for the client website I'm working on and created a sample for publication here. I have a regular CSS file and a mobile CSS file. When in the mobile view Divs will be aligned in sequential order 1-6. When in normal mode, Divs 1, 3, 4, and 5 will be aligned to the right. Divs 2 and 6 will be aligned to the left. I need div 6 to hug the bottom of div 2 except for about 10 pixels. With my current code, Divs have a huge gap between them, and 6 gets a push further down the page with a lot of content that the right side of Divs has. All of these Divs have dynamic content that can increase or decrease the amount of content displayed.How can I make Div 6 ignore the right side of Divs and hug Div 2 without clogging how they condense and appear on mobile devices? (You can simply resize your browser window so that the mobile version appears with this code.)

Here is my HTML and CSS:

/*
exampleCSS.css
*/
#containerDiv {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

#div1 {
    border: 1px solid red;
    background-color: red;
    margin-bottom: 10px;
    width: 25%;
    float: right;
}

#div2 {
    border: 1px solid blue;
    background-color: blue;
    margin-bottom: 10px;
    width: 65%;
    float: left;
}

#div3 {
    border: 1px solid green;
    background-color: green;
    margin-bottom: 10px;
    width: 25%;
    float: right;
}

#div4 {
    border: 1px solid orange;
    background-color: orange;
    margin-bottom: 10px;
    width: 25%;
    float: right;
    clear: right;
}

#div5 {
    border: 1px solid purple;
    background-color: purple;
    margin-bottom: 10px;
    width: 25%;
    float: right;
    clear: right;
}

#div6 {
    border: 1px solid pink;
    background-color: pink;
    margin-bottom: 10px;
    width: 65%;
    float: left;
}

/*
exampleCSSMobile.css
*/
#containerDiv {
    width: 100%;
}

#div1 {
    border: 1px solid red;
    background-color: red;
    margin-bottom: 10px;
    width: 100%;
}

#div2 {
    border: 1px solid blue;
    background-color: blue;
    margin-bottom: 10px;
    width: 100%;
}

#div3 {
    border: 1px solid green;
    background-color: green;
    margin-bottom: 10px;
    width: 100%;
}

#div4 {
    border: 1px solid orange;
    background-color: orange;
    margin-bottom: 10px;
    width: 100%;
}

#div5 {
    border: 1px solid purple;
    background-color: purple;
    margin-bottom: 10px;
    width: 100%;
}

#div6 {
    border: 1px solid pink;
    background-color: pink;
    margin-bottom: 10px;
    width: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="exampleCSSMobile.css" media="(max-width: 940px)" rel="stylesheet" type="text/css" />
        <link href="exampleCSS.css" media="(min-width: 940px)" rel="stylesheet"  type="text/css" />
    </head>
    <body>
        <div id="containerDiv">
            <div id="div1"><p>Test 1 Lorem Ipsum.</p></div>
            <div id="div2"><p>Test 2 Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. Duis sed odio sit amet nibh vulputate 
                            cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. Duis sed odio sit amet nibh vulputate 
                            cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. Duis sed odio sit amet nibh vulputate 
                            cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. Duis sed odio sit amet nibh vulputate 
                            cursus a sit neque. Suspendisse in orci enim.</p></div>
            <div id="div3"><p>Test 3 Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. </p></div>
            <div id="div4"><p>Test 4 Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. Duis sed odio sit amet nibh vulputate 
                            cursus a sit neque. Suspendisse in orci enim.</p></div>
            <div id="div5"><p>Test 5 Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. Duis sed odio sit amet nibh vulputate 
                            cursus a sit neque. Suspendisse in orci enim.</p></div>
            <div id="div6"><p>Test 6 Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. Duis sed odio sit amet nibh vulputate 
                            cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. Duis sed odio sit amet nibh vulputate 
                            cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. Duis sed odio sit amet nibh vulputate 
                            cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. Duis sed odio sit amet nibh vulputate 
                            cursus a sit neque. Suspendisse in orci enim. Lorem Ipsum. Prion gravida nibh vel velit auctor 
                            aliquet. Aenean solicitudin, lorem quis bibendum 
                            auctor, nisi elit consquat ipsum, nec sagittas sem 
                            nibh id elit. Duis sed odio sit amet nibh vulputate 
                            cursus a sit neque. Suspendisse in orci enim.</p></div>
        </div>
    </body>
</html>
Run codeHide result

Image of an example with space from 2 to 6: enter image description here

+4
source share
2 answers

An element with a floating point moves as far left or right as it can in the position where it was originally (this is important # 1).

So do this:

We have 2 div

<div class="div5">div5</div>
<div class="div6">div6</div>

.div-blue{
    width:100px;
    height:100px;
    background: blue;
}

.div-red{
    width:50px;
    height:50px;
    background: red;
}

without floatthey will be lower than others

enter image description here

If float: right div5, div6will be on the line when it was div5,

/*the lines are just for illustrate*/

enter image description here

So, if now we are float: left div6, it will move as far to the left as possible, “ in this line ” (see # 1 above), so if you div5change its line, it div6will follow it.

Now add another div to the equation

<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>

.div-gree{
    width:150px;
    height:150px;
    background: green;

    float:right;
}

We have it

enter image description here

clear: right div5, div4

enter image description here

, . jsfiddle,

,

float <div id="div6"> display: inline-block

:

#div6 {
    border: 1px solid pink;
    background-color: pink;
    margin-bottom: 10px;
    width: 65%;

    /*float: left;*/    /*removed*/

    display: inline-block;  /*added*/
}

float ( , .). display: inline-block margin div2.

JSFIDDLE,

, :)

+4

javascript:

window.onload = function(){
    var d6Id = document.getElementById( 'div6' ); 
    var d6distanceTop = d6Id.offsetTop; // Get height above div 6

    var d2height = document.getElementById( 'div2' ).clientHeight; // Get height of div 2

    var space = d6distanceTop - 30 - d2height; // 30 for padding top and bottom + 10px margin

    d6Id.style["margin-top"] = "-"+space+"px";
}
0

More articles:


All Articles