The CSS layout is not positioning elements correctly

Here is a preview of how I want my final design to appear:

I am facing difficulty in properly aligning the two columns using my CSS code. Whenever I apply the float: left; property, the columns end up stacking on top of each other.

    /*------ Code starts here -----*/
    body {
    margin: 0 auto;
    padding: 0;
    font: .75em/1.5em Helvetica, Arial, sans-serif;
    color: #797267;
    width: 960px;
    background: #797267;
    }
    
    /**--- Headers ---*/
    
    header{
    width: 960px;
    height: 210px;
    background-image: url(../images/header-bg.jpg);
    }
    
    h1{
    width: 317px;
    height: 71px;
    padding: 64px 0px 0px 64px;
    margin: 64px 64px 0px 0px;
    
    }
    
    h2{
    color: #423b2e;
    size: 1.5em;
    }
    
    /*--- Navigation ---*/
    
    nav{
    color: #423b2e;
    }
    
    #current{
    color: #bf3102;
    }
    
    ul {
        list-style-type: none;
        padding: 84px 64px 0px 0px;
        float: right;
        clear: left;
        width: 277px;
    } 
    
    li {
        display: inline;
    }
    
    /*--- Banner --*/

    div{
    background-image: url(../images/main-content-bg.jpg);
    width: 960px;
    }
    
    div #banner{
    background-image: url(../images/banner.jpg);
    width: 890px;
    height: 200px;
    margin: auto;
    background-repeat: none;
    }
    
    /*--- Two-Column Layout Content (& Columns) */
    
    
    #column1of2{
    width: 450px;
    padding: 25px;
    }
    
    #column1of2.page-flip {
    background-image: url(../images/page-flip.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 450px;
    margin: 0px 0px 45px 64px;
    }
    
    #column2of2{
    width: 260px;
    padding: 25px;
    }
    
    #column2of2.page-flip {
    background-image: url(../images/page-flip.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 260px;
    margin: 0px 0px 45px 44px;
    }
    
    
    /*--- Footer Design Area --*/
    
    footer{
    background-image: url(../images/footer-bg.jpg);
    background-repeat: no-repeat;
    color: #423b2e;
    size: .9em;
    text-align: center;
    width: 960px;
    padding: 92px 0px 0px 0px;
    }
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>BusinessName</title>
    <link rel="stylesheet" href="css/main.css" />
    </head>
    <body>
    <header>
    
    <h1><a href="index.html">Business Name</a></h1>
    
    <nav>
    
    <ul>
    <li><a href="index.html" id="current">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    
    </nav>
    
    </header>
    
    <div id="main-content">
    
    <div id="banner">
    
    </div>
    
        <section id="column1of2" class="page-flip">
    
            <h2>Who We Are (Header 2)</h2>
    
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</p>
             
            <p>Nullam ultricies sem eget ornare lobortis. Phasellus leo ante, accumsan at felis nec urna.</p>
            
    <p>Donec aliqueta pulvinar mauris vitae fermentum. Vestibulum placerat dictum tincidunt. Suspendisse potenti.</p>
     
        </section>
        
        <section id="column2of2" class="page-flip">
     
            <h2>How You Can Benefit (Sub-header 2)</h2>
            
            <p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb1.jpg" /> Sed lacinia porta mattis.</p>
    
      <p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb2.jpg" /> Etiam vulputate mi et nunc facilisis, vel iaculis purus tempus.</p>
    
            <p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb3.jpg" /> Vivamus consectetur massa ac blandit fringilla.</p>
    
        </section>
        
    </div>
    
    <footer>
    
    <p>&copy; Business Name. All rights reserved. </p>
    
    </footer>
    </body>
    </html>

Answer №1

It appears there is a misunderstanding. The CSS property float: left; does not seem to be affecting the layout of the columns.

Answer №2

Have you attempted to use the Display:inline property without referencing your code?

Answer №3

I believe this solution will meet your needs as I don't have access to your images, so I have set the background color for demonstration purposes.

body {
    margin: 0 auto;
    padding: 0;
    font: .75em/1.5em Helvetica, Arial, sans-serif;
    color: #797267;
    width: 960px;
    background: #797267;
}

/**--- Headers ---*/

header  {
    width: 960px;
    height: 210px;
    background-image: url(../images/header-bg.jpg);
    background-color:red;
}

h1  {
    width: 317px;
    height: 71px;
    padding: 64px 0px 0px 64px;
    margin: 64px 64px 0px 0px;

}

h2  {
    color: #423b2e;
    size: 1.5em;
}

/*--- Navigation ---*/

nav {
    color: #423b2e;
}

#current    {
    color: #bf3102;
}



ul {
    list-style-type: none;
    padding: 84px 64px 0px 0px;
    float: right;
    clear: left;
    width: 277px;
} 

li {
    display: inline;
}

/*--- Banner --*/

div {
    background-image: url(../images/main-content-bg.jpg);
    width: 960px;
    background-color:black;
}

div #banner {
    background-image: url(../images/banner.jpg);
    width: 890px;
    height: 200px;
    margin: auto;
    background-repeat: none;
    background-color:green;
}

/*--- Two-Columns Content --*/


#column1of2 {
    width: 450px;
    padding: 25px;
    float:left;
    background-color:yellow;
}

#column1of2.page-flip {
    background-image: url(../images/page-flip.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 450px;
    margin: 0px 0px 45px 64px;
}

#column2of2 {
    width: 260px;
    padding: 25px;
    background-color:blue;
    float:left;
}

#column2of2.page-flip {
    background-image: url(../images/page-flip.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 260px;
    margin: 0px 0px 45px 44px;
}


/*--- Footer --*/

footer  {
    background-image: url(../images/footer-bg.jpg);
    background-repeat: no-repeat;
    color: #423b2e;
    size: .9em;
    text-align: center;
    width: 960px;
    padding: 92px 0px 0px 0px;
    background-color:green;
   clear:both;
  
}
<header>

            <h1><a href="index.html">BusinessName</a></h1>

            <nav>

                <ul>
                    <li><a href="index.html" id="current">Home</a></li> 
                    <li><a href="about.html">About</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>

            </nav>

        </header>

        <div id="main-content">     

            <div id="banner">

            </div>

            <section id="column1of2" class="page-flip">

                <h2>Who We Are (h2)</h2>

                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Aenean pretium tellus  sit amet enim. Donec laoreet urna ut pede. Nulla eget magna at felis feugiat imperdiet.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            </section>

            <section id="column2of2" class="page-flip">

                <h2>How We Can Help (h2)</h2>

                <p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb1.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>

                <p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb2.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>

                <p><img width="70" height="70" alt="placeholder image" src="images/sample-thumb3.jpg" /> Sunc auctor, est a scelerisque vehicula, tortor nulla imperdiet elit, eu tincidunt ligula. </p>

            </section>

        </div>

        <footer>

            <p>&copy; BusinessName. All rights reserved. </p>

        </footer>  

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

Using an HTML5 image icon as an input placeholder

Is there a way to incorporate an image icon into an input placeholder and have it disappear when the user starts typing, across all browsers? In trying to achieve this, I successfully implemented a solution for webkit (Safari+Chrome) using ::-webkit-input ...

Aligning multiple spans vertically within a div of varying height (ui-select-multiple)

I am currently using AngularJS ui-select's Multiselect feature. If you want to see how my multiselect looks, check it out here: http://plnkr.co/edit/zJRUW8STsGlrJ38iVwhI?p=preview When arranging spans in multiple lines, achieving nice vertical align ...

Updating the Background Image Based on Text Input in JavaScript

Struggling to utilize the text entered into a text input field as a background image URL. Ensuring it is valid is key. This snippet displays what has been attempted so far... CSS: body { margin: 0px; padding: 0px; border: 0px; } .bgimg { backgr ...

Tips for formatting HTML to showcase two data cards when printing a page

My XML data input document can be neatly transformed into printable data cards, whether it's 2 to a page, 4 to a page, 9 to a page, or any other configuration. What is the most effective method for styling the data to fit the printing layout? How can ...

Text that only occupies a portion of the screen width

My unordered list (ul) contains three list items (li). The first li element displays the text "opptakskrav" and the last li element displays "ja". Can anyone explain why the text in my second li element does not use the full width and starts a new line hal ...

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Wouldn't it be cool to have a magic line that follows your mouse as you navigate through the header menu? Take a look at this example: It works seamlessly and smoothly. I tried implementing a similar jQuery script myself, but it's not as smoot ...

What is the method for tallying CSS page breaks in printed HTML documents?

Currently, for my report generation process using HTML and CSS to manage page breaks dynamically. I've enabled the option for users to print multiple reports at once by combining them into different sections within a single HTML document. This helps p ...

What about a lightbox with enhanced jQuery features?

As a newcomer to jQuery, I've never experimented with lightboxes before. However, I was tasked with creating something fun for April Fools' Day at work. Naively, I accepted the challenge thinking it would be simple, but now I find myself struggli ...

CSS page breaks function properly in Internet Explorer 8, however, they are not functioning correctly in Firefox and Google Chrome

Help Needed: I encountered an issue where I wrote CSS to display page breaks in my HTML. It seems to work fine in Internet Explorer, but not in Firefox and Chrome. Here is the inline CSS I used: <br style="page-break-after: always;"> Below is a sni ...

Ways to determine the current page I am viewing

I am working with a list of tabs and I need to track my current location every time I click on a specific tab. My MainCTRL controller, which is the parent of all tab controllers, needs to be aware of the active tab at any given moment. I attempted to use n ...

Overflow of text arranged horizontally within a span element situated inside a div container

I am currently working on developing a ticketing system that involves using nested div elements to organize content. Each ticket is represented by a main div containing various other nested divs and media such as images. While the functionality of the sys ...

Issue with input width percentage not functioning as expected

Is there a special method to specify the width of an input field in CSS without it extending beyond the container? I want my input field to be 98% of the container's width, but when I set it to that, it goes off the screen. This is the HTML code I am ...

Tips on adjusting the size of a font icon using an inline element prior to the font being fully loaded

I'm facing an issue with embedding an icon font within text so that it wraps properly. Currently, the only way I can achieve this is by using &nbsp; between the text and the icon (i tag with font awesome). However, this causes a problem as the ico ...

How to perfectly align an element within a div using Bootstrap

Utilizing bootstrap here. Currently trying to center the h1 element within the div, but so far I have been unsuccessful. It consistently remains aligned to the left. Attempts have included using bootstrap's center-block helper class, as well as the fl ...

Tips for selectively applying CSS to a single HTML file

I'm currently working on a website utilizing AngularJS and Plangular to develop a unique Soundcloud Player. This is how I incorporate my template: <body> <div id="container"> <div id="header" ng-controller="HeaderCtrl"><div ...

How to position two divs in a row using Bootstrap

Looking at the output below: https://i.stack.imgur.com/pQM8F.png The blue circle is placed in one div, while the text is in another. I'm perplexed by why the first div appears on top and the second doesn't seem to align properly. Here's th ...

Tips for overlaying text onto a MaterialUI icon

https://i.stack.imgur.com/cFr5Y.pngI am currently working on a project that requires me to overlay a number on top of an icon. Specifically, I am utilizing the MaterialUI ModeComment icon and attempting to display text over it. Despite trying the following ...

Tips for preventing the larger background from displaying a scroll on a web page

Specifically tailored for this specific page: I am looking to eliminate the scrollbar at the bottom of the browser, similar to how it appears on this page: Thank you ...

The CSS overflow property does not seem to be functioning properly when applied to a span element that

Here is my current setup: http://jsfiddle.net/YKXUb/1/ My CSS looks like this: .two { height: 100%; width: 100%; border:1px solid green; } .hold { float: left; height: 100%; width: 35%; border:1px solid green; } .right { hei ...

Quantify the Proportion of Affirmative/Negative Responses and

I am attempting to calculate the percentage of "Yes" or "No" responses in an HTML table based on user input for each month's questions. Then, I want to display the average percentage in the "average" column for each month. For example, if the user sel ...