The use of float is causing issues with Overflow:hidden, clear:both, and clear fix functionalities

I'm in the process of creating a basic informational website using HTML and CSS, with a columned layout using the 960 grid system.

However, I'm encountering an issue when trying to align my header (which includes a logo image as a background using CSS) to the left and the navigation list to the right. The content below shifts upwards and overflow:hidden isn't resolving it. I've attempted using clear fix classes from the 960 grid and clear:both but they are not having any effect.

If anyone can identify what I might be doing incorrectly, please advise.

Here's the CSS:

/**** =header ****/
header {
    overflow: hidden;
}

header h1 {
    background: url(../img/logo.png) no-repeat;
    text-indent: -9999px;
    height: 23px;
    width: 174px;
    float: left;
}

/**** =nav ****/

nav {
    float: right;
}

nav li {
    display: inline;
}

/**** =banner ****/

.banner {
    background: url(../img/city-bg.jpg) no-repeat;
    width:695px;
    height:231px; 
}

.callout {
    background: black;
    height: 231px;
}

And here's the HTML:

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/text.css">
    <link rel="stylesheet" href="css/960_12_col.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container_12">  <!--start container - using the 960 grid-->
        <header>
            <h1>White + Black</h1>
            <nav>
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="ourservices.html">Our Services</a></li>
                    <li><a href="howwework.html">How We Work</a></li>
                    <li><a href="testimonials.html">Testimonials</a></li>
                    <li><a href="workexamples.html">Work Examples</astyle=></li>
                </ul>
            </nav>

            <div class="banner gird_10">
                <p>
                    Some placeholder text.
                </p>
            </div>
            <div class="grid_2 callout"></div>
        </header>

        <div class="main">
            <div class="grid_5">
                <h3>Services We Offer</h3>
                <p>
                    Placeholder text for services offered.
                </p>
                <p>
                    Additional information about services.
                </p>
                <p><a href="#" class="button">Read More</a></p>
            </div>

            <div class="grid_5">
                <h3>How We Work</h3>
                <p>
                    Information about our work ethic.
                </p>
                <p>
                    Details on how we operate.
                </p>
                <p><a href="#" class="button">Read More</a></p>
            </div>
        </div>
        <div class="grid_2">
            <blockquote>
                <p>
                    Some sample quotation text.
                </p>
            </blockquote>
        </div>

        <footer>
            <p><strong>Black + White</strong> themes via <a href="www.themeforest.net">ThemeForest</a></p>
        </footer>
    </div> <!--end container-->
</body>

htmlcss

Answer №1

My usual practice involves creating a CSS class called .clear:

.clear {
    clear:both;
}

I then place it after any floated elements, such as after the nav element like so:

<h1>Title</h1>
<nav>
    <!-- nav elements -->
</nav>
<div class="clear"></div>

If you already have a .clearfix class available, it is recommended to use that instead.

Answer №2

For a helpful example, check out this link

HTML

<div class="container_12">  <!--start container - using the 960 grid-->
    <header>
    <div class="navigation">

        <h1>White + Black</h1>

        <nav>
            <ul>
                <li><a href="home.html">home</a></li>
                <li><a href="ourservices.html">Our Serices</a></li>
                <li><a href="howwework.html">How We Work</a></li>
                <li><a href="testimonials.html">Testimonials</a></li>
                <li><a href="workexamples.html">Work Examples</a></li>
            </ul>
        </nav>
    </div>

    <div class="banner gird_10">
        <p>
            some text some text some text some text some text
        </p>
    </div>

    <div class="grid_2 callout"></div> // Grid callout
</header>

    <div class="main">
        <div class="grid_5">
            <h3>serices we offer</h3>
            <p>
                some text some text some text some text some text some text some text some text some text
            </p>
            <p>
                some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
            </p>
            <p><a href="#" class="button">Read More</a></p>
        </div>

        <div class="grid_5">
            <h3>how we work</h3>
            <p>
                some text some text some text some text some text some text some text some text some text
            </p>
            <p>
                some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
            </p>
            <p><a href="#" class="button">Read More</a></p>
        </div>
    </div>
    <div class="grid_2">
        <blockquote>
            <p>
                some text some text some text some textsome text some text some text some text
            </p>
        </blockquote>
    </div>

    <footer>
        <p><strong>black + white</strong> themes via <a href="www.themeforest.net">themeforest</a></p>
    </footer>
</div> <!--end container-->

CSS

nav {
    float: right;
    display: inline-block;
    vertical-align: middle;
    padding: 30px 0;
}

header h1 {
    float: left;
    display: inline-block;
    vertical-align: middle;
}

nav li {
    display: inline;
}

/**** =banner ****/

.banner {
    background: url(../img/city-bg.jpg) no-repeat;
    width:695px;
    height:231px; 
}

.callout {
    background: black;
    height: 231px;
}

.navigation {
    clear:both;
    height: 100px;
}

Answer №3

There seems to be a small error in the code for your banner container: 

<div class="banner gird_10">

Please correct it (to grid_10) and that should resolve your issue :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating Vertical Text and Div Blocks using CSS

Trying to set up different color section blocks with vertical text on my website's dashboard page. Similar to this example in JSfiddle: http://jsfiddle.net/afpn2y19/4/ <div id="outer"> <div id="inner"> //Feeling lost - ho ...

htmlcsstextrotation

Value of MySQL in a web form

Currently in my PHP code, I have the following: echo '<input type="email" name="email" value=''; I am looking to automatically populate the value with a data from a MySQL row (let's say ['name']), but I am encountering syn ...

phphtmlmysql

issue with conditional statement in Vue.js

In my Vue.js code, I have implemented a v-if statement wrapped around a template tag that is supposed to display a specific message only when the signup type is a referral. Within this template tag, there are nested v-if statements for further conditions. ...

javascripthtmlvue.js

Adjust webpage display with JavaScript

Utilizing the mobile-first approach of Zurb Foundation, I successfully created a responsive design. However, my client now requires a direct link labeled "View desktop version" in the footer for when the website is accessed on mobile devices or tablets. T ...

javascriptcssmedia-querieszurb-foundation

Ways to enable drop-down functionality on navigation bar using Bootstrap

The navbar is visible, but the drop-down menu within the navbar is not functioning. When I click on the drop-down menu, it fails to display the intended menu. I obtained the source code from a different Bootstrap website, but unfortunately, it is not work ...

htmlbootstrap-4angular6

iOS image suddenly expands to full size after applying keyframe scale transformation

Encountering a peculiar iOS glitch while implementing CSS animations for moving shapes on a webpage. The issue arises when the shapes, initially displayed at full size, gradually shrink and fade out during animation. However, towards the end of the anima ...

csstransformcss-animationskeyframe

Choose an image from the gallery, assign a class to it, and then store it in the database

I am looking to implement a feature where users can select an image from a collection of images by clicking on a check mark. Once selected, the image should have a green checkbox indicating it is chosen, and then the ID or name of the selected image should ...

javascriptphpjqueryhtml

Storing information in the DOM: Choosing between Element value and data attribute

When it comes to storing values in a DOM element, we have options like using the data attribute. For example, $("#abc").data("item", 1) can be used to store values and then retrieve them with $("#abc").data("item"). However, I recently discovered that th ...

javascriptjqueryhtml

Tips for retrieving the current value of an input using AJAX

Currently, I am in the process of developing an e-commerce website using Laravel. One issue I am facing is capturing the new value of an input when it changes. This input is located on the cart page where users have the option to adjust the quantity of a p ...

htmljqueryajaxlaravel

Excess space creating horizontal and vertical scrolling issues on an HTML webpage

Currently, I am experimenting with CSS effects. In my code, I have included div elements to display balls on the document body, each with random sizes and colors. However, an unexpected issue has arisen - excess scroll space is being generated due to the c ...

javascripthtmlcsslayoutresponsive-design

The CSS3 feature is not compatible with the Android browser, causing issues with loading responsive CSS

Currently, I am conducting testing on my website across various mobile devices. So far, the site functions perfectly on iOS devices but encounters issues when viewed on Android devices - it appears zoomed in and fails to be responsive. Within the <head ...

androidioscss

Incorporating image URI into HTML for validation purposes

My website validation is encountering issues, mainly due to data/images base64 URIs. I ran a diagnosis on Error: Malformed byte sequence: e9. At line 2, column 259 (etc.) The analysis from https://validator.w3.org/ simply states that it cannot anal ...

htmlw3c-validationdata-uri

Combining two strings to form a single variable using PHP

Currently, I have a registration form set up for users to register successfully into my database. However, I am looking to enhance this functionality by restricting registration to only users with specific domain addresses. After some research, I found tha ...

phphtmlmysql

Picking a File Directory within an HTML Form

I am in the process of creating an intranet site for my company, and one of its functionalities is to store a database of files along with their locations as provided by users. The files are located on a network drive, and those accessing the database shou ...

htmlformsfilepath

Utilizing AngularJS directives with the power of string formatting

Looking at this JSON structure {textTemplate:"Name：{0}，Phone：{1}",controls:[{id:1,Name:"Name",type:"text"},{id:2,Name:"Phone",type:"text"}]} I'm unsure how to utilize the directive for converting strings into HTML controls This is what I&apos ...

javascriptc#htmlangularjsangularjs-directive

Altering the value of a global variable through a local function in JavaScript

I have developed a straightforward piece of Java script code. I'm looking to update the value of a global variable using a local function. Whenever I trigger the value1() function, I want the output to display as "2". Is there a way I can achieve this ...

javascripthtml

Utilizing the @page CSS rule in Vue.js: A step-by-step guide

I am facing an issue with printing a specific page in landscape mode. Here is the code snippet I have been using: @page { margin: 0; size: A4 landscape; } The problem is that this style rule affects all pages in my application because all style se ...

cssvue.jsvue-component

Sometimes the sidebar (with float: left) doesn't stay on the left side

I created a container to hold sidebars and content, but I noticed that when I have more text in the sidebar compared to the container, the second sidebar floats slightly to the side. Here is the code I am using: HTML: <div class="container"> &l ...

htmlcss

Setting the CSS property `position: absolute; bottom: 0`, will move the div to the bottom of the screen rather than the bottom of

I'm currently working on a website where I want to attach a menu-bar to the bottom of the header using #menu { position: absolute; bottom: 0; } Unfortunately, instead of sticking to the bottom of the parent div, the menu-bar is stuck to the ...

htmlcsscss-position

Issue with margins of sections when attempting to activate menu class while scrolling

My Objective: I want to create a website where the menu highlights the section that is currently being viewed as the user scrolls up and down. Progress So Far: I have successfully implemented a functioning menu that changes to "active" when the correspo ...

javascriptjqueryhtmlcss