TechQA.

Issue Getting Div to Hug up close to another

113 views Asked by At

I have 6 Divs within a container Div. These divs have to be aligned a certain way for a clients needs. I've taken the basic layout for the customer website I'm working on and created a sample to be posted here. I have a regular CSS file and a mobile CSS file. When in mobile view the Divs will be aligned in sequential order 1-6. When in the regular view, 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 with the exception of about 10px. With my current code the Divs have a huge gap between them and 6 gets pushed further down the page with the more content the right side Divs have. All of these Divs have dynamic content that can make them increase or decrease in the amount of shown content. How can I get Div 6 to ignore the right side Divs and hug Div 2 without screwing up how these condense and appear in mobile? (You can just resize your browser window for the mobile version to appear 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>

Image of the example with the space between 2 and 6: enter image description here

html css css-float
Original Q&A
2

There are 2 answers

0
Yandy_Viera On BEST ANSWER

A floated element will move as far to the left or right as it can in the position where it was originally(this is important #1).

So put in this way:

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 float they'll be one below the other

enter image description here

If we float: right the div5, the div6 be positioned on the line when it was the div5,

/*the lines are just for illustrate*/

enter image description here

So if now we float: left the div6 it will move as far to the left as it can, "in this line" (see #1 above), so if div5 change its line, div6 will follow it.

Now let's add other div into 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 this

enter image description here

If we set clear: right to the div5, we are force it to take the line bellow div4

enter image description here

So there you have why happens. Here the jsfiddle where I code this

NOW, HOW TO FIX IT

Just remove the float for the <div id="div6"> and set display: inline-block

like this:

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

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

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

This will keep the normal behavior for elements without float (The elements after the floating element will flow around it.). The display: inline-block is for your case to maintain the margin of div2.

HERE A JSFIDDLE EXAMPLE WORKING FOR YOUR CASE

I hope this helps now and in the future :)

0
JohnCH On

You'll need some javascript for this:

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";
}

Related Questions in HTML

Related Questions in CSS

Related Questions in CSS-FLOAT

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions