CODEWITHSUNDEEP
htmlcsscontainerspositioning
Toby King
Toby King

Reputation: 129

HTML/CSS: two divs inside a container div

So this again links to the same website as my other question and is another positioning problem that is possibly simple. I have a container div that I want to hold two divs inside it, one taking up a 3rd of the container on the right to contain pictures and one to contain text on the left. For some reason however, when telling both inner divs to float left the container seems to disappear and when using inspect element, is in a weird place that I cannot explain.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Toby King - Home</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div id="banner">
    <div class="menu">
        <div class="menuBit">
            <h2 class="menuContent">HOME</h2>
        </div>
        <div class="menuBit">
            <h2 class="menuContent">BLOG</h2>
        </div>
        <div class="menuBit">
            <h2 class="menuContent">WORK</h2>
        </div>
    </div>
</div>

<div class="main">
    <div class="textSection">
        <div class="mainTextSection">
            <h1 class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus erat nec porttitor facilisis. In hac habitasse platea dictumst. Mauris id faucibus arcu. Mauris non orci mauris. Vivamus a porta odio. Praesent at purus ante. Quisque magna odio, elementum ut facilisis vitae, consequat at tellus. Praesent nulla est, ultrices sit amet sagittis eget, consequat id justo. Integer elementum in nibh eu ultricies. Integer fringilla urna in mollis accumsan. Etiam iaculis urna et malesuada tincidunt. Nunc dignissim purus eu tempor bibendum.</h1>
        </div>
        <div class="mainPictureSection">
            <img src="images/Example.svg">
        </div>
    </div>
</div>

<div id="footer">
    <h2 class="social">CONTACT:</h2>
    <img src="images/fb.png" class="social">
    <h2 class="social">some text</h2>
    <img src="images/insta.png" class="social">
    <h2 class="social">some text</h2>
</div>
</body>
</html>

CSS:

#banner {
    height: 50px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    position: fixed;
    background-image: url("images/menuHor.png");
}
.menuBit {
    height: 40px;
    width: 100px;
    margin: 0px;
    padding: 0px;
    float: left;
    margin-left: 10px;
}
.menuContent:hover {
    text-decoration: underline;
    cursor: pointer;
}
.menuContent {
    font-family: "cicle-gordita";
    font-size: 30px;
    text-align: center;
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    color: #ffffff;
}
.main {
    position: fixed;
    margin: 0px;
    margin-top:50px;
    padding: 0px;
    width: 100%;
    height: 94.7916666667%;
    overflow: scroll;
    background: url("images/backgr.png");
}
.maintext {
    font-family: "cicle-gordita";
}
.textSection {
    width: 65%;
    height: auto;
    background: #FFFFFF; 
    margin-right: 17.5%;
    margin-left: 17.5%;
    margin-top: 2.5%;
    margin-bottom: 5%;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
.mainPictureSection {
    height: auto;
    width: 21.67%;
    float: left;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}
.mainTextSection {
    height:auto;
    width: 43.33%;
    float: left;
    margin: 0px;
    padding: 0px;
}
#footer {
    width: 100%;
    height: 30px;
    clear: both;
    position: fixed;
    bottom: 0;
    background-image: url("images/menuHor.png");
}
.social {
    float: left;
    padding: 0;
    margin-top: 0px;
    margin-bottom: 2.5px;
    margin-left: 10px;
    font-family: "cicle-gordita";
    color: #ffffff;
}
.social h2 {
    margin-top: 5px;
}

The Jscript/jQuery file is just to fade bits in and out but contributes no effect to positioning

Upvotes: 1

Views: 6042

Answers (2)

connexo
connexo

Reputation: 56744

Where has the parent element gone?

If a container has only floating children, its height will collapse as floating elements are not considered when calculating height of a container. You need to clear those floating elements to make the container actually contain the floating children.

One way to do this is by adding a clearfix and putting the class on the container element (taken from http://nicolasgallagher.com/micro-clearfix-hack/):

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {
    *zoom: 1;
}

That's kind of ugly. Any other solution?

There is an (more than one) alternative, though, the most common probably being using display: inline-block instead of float: left.

Unfortunately, looking at the following example you'll see it does not work as expected initially:

.container {
  background-color: #a00;
}
.child {
  background-color: #f0f0f0;
  display: inline-block;
  width: 50%;
}
<div class="container">
  <div class="child">Child One</div>
  <div class="child">Child Two</div>
</div>

You see that the second container wraps to a new line even though both have been defined to have their fair share of 50% of the container's width.

Why does this happen?

As soon as your HTML contains any sort of whitespace between inline-block elements, it's going to get rendered and consume space.

So how can I fix that?

The most common way to avoid that is to set the container's font-size: 0; (which is not always the go-to-solution, but in most cases), and re-setting it ony the children as needed:

.container {
  background-color: #a00;
  font-size: 0;
}
.child {
  background-color: #f0f0f0;
  display: inline-block;
  font-size: 16px;
  width: 50%;
}
<div class="container">
  <div class="child">Child One</div>
  <div class="child">Child Two</div>
</div>

Upvotes: 1

Wim Mertens
Wim Mertens

Reputation: 1790

Change float: left to display: inline-block should be the best way to do this.

display: inline-block adds white-space. One way to remove this is adding comments between your divs:

<div class="container">
    <div class="child">
    </div><!--
    --><div class="child">
    </div>
</div>

or have the divs inline like this:

<div class="container">
  <div class="child"></div><div class="child"></div>
</div>

To align them at the top add vertical-align: top to the child divs.

Upvotes: 1

Related Questions