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>

htmlcsscss-float

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

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 №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>

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

Looking for assistance with fixing the echo issue in my PHP temperature converter script. Any help is greatly appreciated

Below is my PHP code for converting temperatures: <html> <head> <title>Temperature Conversion</title> <meta charset="utf-8"> </head> <body> <form name="tempConvert" method=&q ...

phphtmlformsecho

In what way can the button display the permission directly on the page?

When the website notification is granted, a green button should be displayed. If it is denied, show a red button instead. The button comes with a CSS style and a checkbox but does not have the permission to grant or allow any permissions on the page. Butt ...

javascripthtmlcss

What is the best way to retrieve the first item in owl carousel's content?

I need help creating a slider with two sections: top and bottom. My goal is to display the content from the bottom slider on the top slider. I tried adding a class to the first item element, but it didn't work. If anyone knows how to target the first ...

javascripthtmlowl-carousel

The navigation bar extends beyond the page's width

Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...

jqueryhtmlcssnavbarnav

CSS: The button appears to be slightly lower than the label

For more information, check out this GitHub link Here is the HTML code snippet: <div class="col-md-12"> <div class="col-md-2"> Processing </div> <div class="col-md-4"> <button class="btn btn-primary">Hello</ ...

csstwitter-bootstrap

PHP - session expires upon page refresh

I'm in the process of creating a login system for my website and I've run into an issue with updating the navigation bar once a user has logged in. Every time I refresh the page, it seems like the session gets lost and the navigation bar doesn&ap ...

javascriptphpjqueryhtmlsession

Exploring Angular's Animation Feature for HTML Element Movement

I'm currently using @angular/animations module to animate HTML objects and I want to move an object when a button is clicked. For example: * The object initially has top: 800px, left: 800px * Clicking the 'W' button should move the obje ...

cssangular

Utilizing WordPress to dynamically update the footer content on a targeted webpage by modifying the HTML/PHP/JS code

Let me provide some clarity. Details: - Website built on WordPress This website is bilingual with Hebrew and English languages. The issue is with the footer section. I have 4 lines that need to display: - Address: ........ - Phone: ....... - Fax: ...... - ...

javascriptphphtmlwordpress

Is there a way to eliminate the white border surrounding this input field? (JSFiddle link included)

http://jsfiddle.net/gn3LL/ .error { background-color: red; } <input id="firstname" class="custom error" name="first_name" type="text" placeholder="" class="input-xlarge"> I am trying to remove the small white border around the inside of the inpu ...

csstwitter-bootstrap

Disabling tooltip functionality on an element

Trying to figure out how to remove a tooltip from an element once the text is no longer truncated. The challenge lies in not being able to access the event of the tooltip itself. The tooltip is added by setting an attribute on truncation, but simply removi ...

javascripthtmlangularjsangular-ui-bootstrap

Tips for choosing a drop-down menu option without an identifier using Selenium in Python

I am trying to choose an element/item from a drop-down menu in Python and Selenium without using an id element. Here is the HTML code snippet: <mbo-transaction-mode-select mode="filters.mode" class="ng-isolate-scope"> <select class="form-con ...

pythonhtmlselenium

Tips on disregarding events within an html table

I have a see-through table with a width set to 100% that houses various HTML content. I am utilizing the table to properly center a particular element on the screen. However, the table is intercepting mouse events and preventing users from clicking on lin ...

javascripthtmlcssbrowserdom-events

Exploring NodeJS Express Routing Across Various URIs/URLs

In my application, there is a public folder that contains HTML/CSS3/JS code. This folder has two main parts: one with the public facing index.html inside public/web and another with an admin view exclusively for admins. Below is the basic layout: public ...

javascripthtmlnode.jsexpressmiddleware

What is the best way to retrieve the current value of a header cell, including any nested headers?

My handsontable has headers that include checkboxes and select boxes. How can I access the headers to check the value of a select/checkbox inside the header cell? You can view an example in this JSFiddle (with nested headers - same as my project): http:/ ...

javascriptjqueryhtmlhandsontable

Repeated information in HTML tables

I am currently working with two HTML tables and two sets of JSON data. Initially, I load one table with the tableData which has a default quantity of 0. In my HTML form, there are three buttons - save, load draft, and edit. Upon clicking on load draft, I p ...

javascriptjqueryhtml

Preventing scrolling on a YouTube video embed

I have been working hard on developing my personal website. One issue I encountered is that when there is a YouTube video embedded in the site, it stops scrolling when I hover over it. I would like the main document to continue scrolling even if the mouse ...

javascriptjqueryhtmliframeyoutube

In IE9, the margin: auto property does not effectively center a div element

I'm trying to center a content div in the space leftover by a sidebar. Here's how I want it to look: After some trial and error, I was able to achieve this for most browsers by using margin: auto on the specific div, along with setting overflow: ...

htmlcssinternet-explorerinternet-explorer-9

Pass the JavaScript variable and redirect swiftly

One of the functionalities I am working on for my website involves allowing users to submit a single piece of information, such as their name. Once they input their name, it is sent to the server via a post request, and in return, a unique URL is generated ...

javascripthtmlexpressredirectweb

Making the most of Material Design icons in MaterializeCSS: A step-by-step guide

I am looking to customize my mdi icons by adding my own set of icons into custom classes. The existing mdi classes do not match my requirements. Is there a way for me to add these icons and use them just like the default ones? <i class="mdi-image-face ...

cssmaterial-designmaterialize

Why is my Bootstrap Carousel Switching Images but Refusing to Slide?

I've encountered a problem with my bootstrap carousel. The slide effect doesn't seem to be working, even though I have added the "slide" CSS tag. Instead of sliding, the images just quickly change without any transition. Here are some key points ...

javascriptjquerycssbootstrap-4