The fixed div width suddenly switches to 100% without warning

Question

The fixed div width suddenly switches to 100% without warning

I'm struggling with a basic design issue. My goal is to align the purple div next to the yellow div. Both of these divs are nested inside the white div, and the white div is enclosed within the blue div.

When I float the yellow and purple divs to the left, the fixed width of the white div changes from 960px to 100%, and the blue div disappears.

Any suggestions for resolving this issue? I've attempted using clear:both, but it hasn't worked.

/* Footer */
#footer-wrap{
width:auto;
height:auto;
background:#039;
}
#footer-content-wrap{
width:960px;
height:auto;
background:#EDF5F7;
margin:0 auto;
}
#footer-left{
width:500px;
height:200px;
background:#CC3;
}
#footer-right{
width:460px;
height:200px;
background:#96F;
}

<!-- Footer -->
<div id="footer-wrap">
<div id="footer-content-wrap">

<div id="footer-left"></div>

<div id="footer-right"></div>

</div>
</div>

</body>
</html>

html css css-float

Answer 1

Answer №1

If you're facing the issue of containers losing height when floating elements, a simple solution is to add overflow: auto; to both containers. This will prevent the containers from collapsing due to floating elements. To understand this concept better, you can refer to this insightful thread on Stack Overflow: why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t. Additionally, I have provided a fiddle showcasing your code with the overflow issue fixed. By adding extra padding to the containers in the demo, you can clearly see the difference in results. Without the padding adjustments, it may seem like the elements have disappeared. Moreover, I changed the color of one container to red for better visibility of the final output.

Answer 2

If you're facing the issue of containers losing height when floating elements, a simple solution is to add overflow: auto; to both containers. This will prevent the containers from collapsing due to floating elements. To understand this concept better, you can refer to this insightful thread on Stack Overflow: why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t. Additionally, I have provided a fiddle showcasing your code with the overflow issue fixed. By adding extra padding to the containers in the demo, you can clearly see the difference in results. Without the padding adjustments, it may seem like the elements have disappeared. Moreover, I changed the color of one container to red for better visibility of the final output.

Answer 3

Answer №2

When you float the footer-left and footer-right divs, the white div expands to 100% width because its total width of 960px equals the combined width of the footers.

If I float the yellow and purple divs left, the white div adjusts its fixed width from 960px to 100%, causing the blue div to be hidden.

The blue div remains hidden because the floats are not cleared - remedy this by adding overflow: hidden to the footer-content-wrap.

View the demonstration below:

/* Footer */

#footer-wrap {
  width: auto;
  height: auto;
  background: #039;
}
#footer-content-wrap {
  width: 960px;
  height: auto;
  background: #EDF5F7;
  margin: 0 auto;
  overflow: hidden;
}
#footer-left {
  float: left;
  width: 500px;
  height: 200px;
  background: #CC3;
}
#footer-right {
  float: left;
  width: 460px;
  height: 200px;
  background: #96F;
}

Answer 4

When you float the footer-left and footer-right divs, the white div expands to 100% width because its total width of 960px equals the combined width of the footers.

If I float the yellow and purple divs left, the white div adjusts its fixed width from 960px to 100%, causing the blue div to be hidden.

The blue div remains hidden because the floats are not cleared - remedy this by adding overflow: hidden to the footer-content-wrap.

View the demonstration below:

/* Footer */

#footer-wrap {
  width: auto;
  height: auto;
  background: #039;
}
#footer-content-wrap {
  width: 960px;
  height: auto;
  background: #EDF5F7;
  margin: 0 auto;
  overflow: hidden;
}
#footer-left {
  float: left;
  width: 500px;
  height: 200px;
  background: #CC3;
}
#footer-right {
  float: left;
  width: 460px;
  height: 200px;
  background: #96F;
}

Answer 5

Answer №3

To create a layout where two divs are aligned next to each other, you can use the CSS property float:left.

Check out an example on this CodePen link.

CSS :

#container {
    width: 100%;
}
#left-div {
    width: 50%;
    float: left;
}
#right-div {
    width: 50%;
    float: left;
}

HTML :

<div id="container">
  <div id="left-div"></div>
  <div id="right-div"></div>
</div>

Answer 6

To create a layout where two divs are aligned next to each other, you can use the CSS property float:left.

Check out an example on this CodePen link.

CSS :

#container {
    width: 100%;
}
#left-div {
    width: 50%;
    float: left;
}
#right-div {
    width: 50%;
    float: left;
}

HTML :

<div id="container">
  <div id="left-div"></div>
  <div id="right-div"></div>
</div>

The fixed div width suddenly switches to 100% without warning

Answer №1

Answer №2

Answer №3

Similar questions

Populate JQuery fields dynamically based on changing name elements

The right padding on an HTML table is not functioning properly when the table width is larger than

Guide on inserting a dropdown menu following a specific count of <li> elements using Javascript or Jquery

Utilizing Font Awesome icons within a JSON structure

Personalized design created using v-for

Adjusting the size and adding ellipsis to the <td> component within a table

Firefox experiencing trouble handling flexbox overflow

How can I use jQuery to identify the numerical range within class/td/div elements and modify their CSS styles?

Struggling to Send Data and Generate a Calculated Value with Django

Incorporate unique color variables from the tailwind.config.js file

HTML Changing the background color of the body using HTML elements

Using dynamic jquery to target specific elements. How can we apply jquery to selected elements only?

Using Modernizr to determine the presence of nth-child in a test

Is JSF h:outputStylesheet converter the solution for creating dynamic CSS?

How to use jQuery to update the href attribute of a parent link

Real-time update of quiz results based on varying factors

Iterate through an Array of Objects and exhibit a single object property in HTML one at a time by utilizing Javascript

Here is a unique rewrite:"Adjusting the prop of a Material UI Button component depending on screen size breakpoints can be achieved by utilizing

What are the advantages of incorporating JSON for retrieving data from MySQL?

Is there a way to create a table with "cells that can be controlled individually" similar to the image provided using HTML and CSS?