1

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

Toby King
  • 119
  • 1
  • 3
  • 13

2 Answers2

1

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.

Wim Mertens
  • 1,780
  • 3
  • 20
  • 31
  • You really shouldn't recommend this without elaborating on the whitespace issue coming up. – connexo Oct 25 '16 at 21:47
  • This works well at first, but for some reason the divs don't align on the same level. Instead one is slightly lower than another – Toby King Oct 25 '16 at 21:47
  • Yes, display: inline-block adds white-space. @connexo you're right I will update my answer in a sec. – Wim Mertens Oct 25 '16 at 21:48
  • This works really well due to the edit, thanks for that :) Helping get my positional skills better haha – Toby King Oct 25 '16 at 21:55
  • @TobyKing happy to help :) – Wim Mertens Oct 25 '16 at 21:56
  • @Toby King I really tried to explain both the problem and the solution so you don't only know how to solve the problem, but also to understand both the problem's cause and the way the solution works (and has to be fixed). – connexo Oct 25 '16 at 22:00
  • You fail to mention the most common solution to that whitespace problem. In many cases, the HTML will be generated by some system you might not fully control, so getting rid of white-space using your suggested methods is definitely not the go-to-solution here. – connexo Oct 25 '16 at 22:03
  • @connexo I'll make a note of that, it may be quite useful in the future when I have similar problems that can't be solved using the above method – Toby King Oct 25 '16 at 22:03
1

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>
connexo
  • 53,704
  • 14
  • 91
  • 128