Is the page wrapper failing to contain or wrap anything at all?

Having a bit of trouble with my div element not wrapping all the way down. To simplify things, I've applied borders and background colors to everything. Here's the HTML code...

I could resort to adding a float left to the page-wrapper div as a workaround, but that's not the ideal solution. Everything seems to be functioning properly as it is now, but the issue with the div not wrapping is quite bothersome.

Check out the JSFiddle http://jsfiddle.net/ywgpB/15/

HTML

<div id="page-wrapper">
    <div class="leftContainer">
        <article class="welcome">
            <header>
                <h2>Welcome!</h2>
                <img src="../images/dummy_125x125.png">
                <p>Dummy Text</p>
            </header>
         </article>

        <article class="hours">
            <header>
                <h2>Working Hours</h2>
                <p>MON - FRI 5:00 AM to 11:00 PM
                <br />SAT - SUN 7:00 AM to 8:00 PM</p>
            </header>
        </article>

        <article class="location">
            <header>
                <h2>Location</h2>
            </header>    
        </article>
    </div>

    <section id="main">
        <div id="banner"></div>
        <div class="containBox">
            <article class="box">
                <h2>Our Members</h2>
                <p></p>
                <button></button>
            </article>

            <article class="box">
                <h2>Classes</h2>
                <p></p>
                <button></button>
            </article>

            <article class="box">
                <h2>Programs</h2>
                <p></p>
                <button></button>
            </article>
        </div>
    </section>
</div>

CSS

body{
    background-image: url(../images/pageglare.png);
    background-repeat: no-repeat;
    color: #000305;
    font-size: 87.5%;
    font-family: Tahoma, Arial, "Lucida Sans Unicode";
    line-height: 1.5;
    text-align: left;
}

#page-wrapper{
   margin: 0 auto;
   width: 90%;
   background-color: pink;
   clear: both;
   border: 2px solid darkorange;
}

.logoContainer{   
   width: 15%;
   border: 2px solid blue;
   margin: 2% 0;
 }

 .leftContainer{
   border: 2px solid darkcyan;
   width: 25%;
   float: left;
   background-color: cyan;
   display: block;
 }

 .welcome{
   width: 100%;
 }

 .welcome img{
   float: left;
 }

.hours{
   float: left;
   width: 100%;
 }

.location{
    float: left;
    width: 100%;
 }

#main{
   width: 65%;
   margin: 0 2%;
   border: 2px solid green;
   float: left;
   background-color: lightgreen;
}

#banner{
   width: 98%;
   height: 300px;
   border: 2px solid gray;
   float: left;
}

.containBox{
   margin-left: 1%;
   width: 97%;
   border: 2px solid black;
   height: 250px;
   clear: both;
   background-color: gray;
   float: left;
}

.box{
    width: 30%;
    border: 2px solid red;
    height: 250px;
    float: left;
}

Answer №1

To contain floating elements, ensure the wrapper has a CSS property of overflow: hidden, or add clear: both to an element after the floated ones.

#page-wrapper {overflow: hidden}

Visit this link for an example

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

Wrapping an anchor tag with a div in Codeigniter

Can a div tag be used inside an anchor function? I have a div with the following CSS: #first{ opacity:0; } Now, I want to include it in my anchor element. Here is the code snippet: <?php if(is_array($databuku)){ echo '<ol>&l ...

Navigate through JSON data to add to an HTML table

HTML <table id="id_kbdata" cellspacing="0" cellpadding="0" > </table> JSON [ { "id":"3", "title":"Doing Business In...", "businessSubjectAreas":[ { "businessSubjectArea":"Market and Sell Products/Service" }, ...

An Angular ng-container situated within a row of an HTML table

I am currently working with a Reactive Form that includes a FormArray (similar to a Game Roster containing basic information such as Start At, Prize, Duration, and an array of players). To display the array of players, I have implemented the following: & ...

Discovering the technique to dynamically load various content using jQuery in a div based on its

After discovering this code to extract information from the first div with an id of container (box4) and retrieve any new data from the URL, everything was functioning correctly. However, I encountered an issue when attempting to load box5 and rerun the co ...

Who needs a proper naming convention when things are working just fine? What's the point of conventions if they don't improve functionality?

I am a newcomer to the world of JavaScript programming and stumbled upon this example while practicing. <html> <head> <script type="text/javascript"> function changeTabIndex() { document.getElementById('1').tabIndex="3" d ...

Enhancing larger elements with a combination of CSS background-image gradients and border lines

My design calls for a background image with a line at the end. The line should start right where the background size ends, and in my concept it is grey. It's important that this line remains as one cohesive element. background-image: linear-gradient( ...

Alternative solution to avoid conflicts with variable names in JavaScript, besides using an iframe

I am currently using the Classy library for object-oriented programming in JavaScript. In my code, I have implemented a class that handles canvas operations on a specific DIV element. However, due to some difficulties in certain parts of the code, I had t ...

A subtle background image with an overlay of a transparent RGBA gradient

Currently, I am working on designing the header of a website. My goal is to incorporate an image on the right side of the header, overlayed with a gradient color that has a certain level of transparency set using rgba values. Although the image and gradien ...

Creating dynamic dropdowns with Ajax and HTML on the code side

I have developed a script that generates a drop-down menu and updates the .box div with a new color and image. Below is the HTML & Java code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> ...

AngularJS: Issue with ngChange not being triggered from directive

A Summary of the Issue at Hand I've created a directive that dynamically displays a list of checkboxes. The directive has a parameter named options, which should be an array structured like this in order for the checkboxes to display correctly: var ...

The registration page in PHP is malfunctioning, and the reason remains a mystery to me

Having trouble with my register page submit button. Any help is appreciated. Below is the structure of my SQL table: CREATE TABLE `USERS` ( `id` int(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(50) NOT NULL, `password` varchar(50) N ...

What strategies and techniques should be considered when creating websites optimized for mobile devices?

With a wealth of experience in programming languages like Java, Python, and C, I actively engage in self-study to enhance my skills. While I have dabbled in creating mobile-friendly websites, upon reviewing my work, it is evident that my frontend developme ...

Maximizing HTML5 Game Performance through requestAnimationFrame Refresh Rate

I am currently working on a HTML5 Canvas and JavaScript game. Initially, the frames per second (fps) are decent, but as the game progresses, the fps starts decreasing. It usually starts at around 45 fps and drops to only 5 fps. Here is my current game loo ...

Centered title in side menu for Ionic 3

I recently utilized the Ionic CLI to create an Ionic project. The version I am working with is Ionic 3. Currently, I am facing a challenge in centering the title image. Any assistance on this matter would be greatly appreciated. <ion-menu [content]=" ...

Trouble with JavaScript preventing the opening of a new webpage

I need help with a JavaScript function to navigate to a different page once the submit button is clicked. I have tried using the location.href method in my code, but it's not working as expected. Even though I am getting the alert messages, the page i ...

How can I eliminate the white bar elements from my dropdown menu? Also, seeking guidance on replacing an empty <div> tag in a boolean query

Can anyone help me understand the strange white border around my dropdown menu and guide me on how to remove it? I am currently using DropdownButton from react bootstrap. I have attempted to adjust the CSS with no success. Here is the code I tried: .Navig ...

Using Vue.js to dynamically populate all dropdown menus with a v-for loop

Getting started with vue.js, I have a task where I need to loop through user data and display it in bootstrap cols. The number of cols grows based on the number of registered users. Each col contains user data along with a select element. These select ele ...

Learn how to use CSS flexbox to easily vertically center items within a container with a full-height background

I'm having trouble with aligning text vertically centered within a box and making sure the background color stretches to full height. HTML: <div class="feature-content"> <div class="feature-visual"> <div class="embed-container"> ...

Obtain data using a REST request from a webpage or web server

Is it possible to extract the last status value from a delivery courier's webpage by sending a tracking number request using PHP? I have found some helpful information, but I am unsure if it is possible to extract only specific values from the result ...

Checkbox: Customize the appearance of the root element

I am trying to modify the root styles of a Checkbox component, but it is not working as expected. Here is my code: <CheckboxItem onChange={()} checked={isChecked} label="Show Checkb ...