The HTML and CSS layout is not displaying correctly as planned

Question

The HTML and CSS layout is not displaying correctly as planned

I am currently working on a responsive webpage design project.

Here is what I have been experimenting with: jsfiddle

<div id="container">
    <div id="one">#one</div>
    <div id="two">#two</div>
    <div id="three">#three</div>
    <div id="four">#four</div>
    <div id="five">#five</div>
</div>

My main goal is to ensure that in the desktop view, #five aligns with the bottom of #three.

As for smaller screens (mobile view), the arrangement of divs works fine and appears in the correct order.

Any suggestions on how I can achieve having #five touch the bottom of #three in desktop view?

html css

Answer 1

Answer №1

Update #five by removing the property float: right and adding overflow: hidden

#five {
  width:200px;
  height:70px; 
  background:#368736;
  overflow: hidden;
}

#container {
  max-width:500px;
  width:100%;
  color: #fff;
}
#one {
  width:300px;
  height:200px; 
  background:#66BCD9;
  float:left;
}
#two {
  width:200px;
  height:50px; 
  background:#A1A6E6;
  float:right;
}
#three {
  width:200px;
  height:50px; 
  background:#E3A1E6;
  float:right;
}
#four {
  width:300px;
  height:100px; 
  background:#ED5894;
  float:left;
}
#five {
  width:200px;
  height:70px; 
  background:#368736;
  overflow: hidden;
}

<div id="container">
  <div id="one">#one</div>
  <div id="two">#two</div>
  <div id="three">#three</div>
  <div id="four">#four</div>
  <div id="five">#five</div>
</div>

Answer 2

Update #five by removing the property float: right and adding overflow: hidden

#five {
  width:200px;
  height:70px; 
  background:#368736;
  overflow: hidden;
}

#container {
  max-width:500px;
  width:100%;
  color: #fff;
}
#one {
  width:300px;
  height:200px; 
  background:#66BCD9;
  float:left;
}
#two {
  width:200px;
  height:50px; 
  background:#A1A6E6;
  float:right;
}
#three {
  width:200px;
  height:50px; 
  background:#E3A1E6;
  float:right;
}
#four {
  width:300px;
  height:100px; 
  background:#ED5894;
  float:left;
}
#five {
  width:200px;
  height:70px; 
  background:#368736;
  overflow: hidden;
}

<div id="container">
  <div id="one">#one</div>
  <div id="two">#two</div>
  <div id="three">#three</div>
  <div id="four">#four</div>
  <div id="five">#five</div>
</div>

The HTML and CSS layout is not displaying correctly as planned

Answer №1

Similar questions

jquery fails to alter label:before

TinyMCE file multimedia upload feature allows users to easily add audio, video

Convert JSON data without backslashes using json_encode

Creating line breaks for ToolTip titles in Material-UI can be achieved by using the appropriate syntax and

Creating a child div that is half the size of its parent

What is the best way to convert API data into a currency format?

Activating Vue-Bootstrap components through an image click event in VueJS 2

The contenteditable div's selectAll feature doesn't function properly when it gains focus

Gaps separating frames

What is the best way to create a dynamic textbox or label within a specific div class?

Resizing background images to their original size using jQuery

What is the best way to use a jQuery variable within a .css() function

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

Calculating dimensions for parents and their children

Content width exceeds body width

Transparent background with opaque text

Creating a responsive canvas and image container in fabric.js involves adjusting the layout and size of the

Variations in spacing due to line breaks

Data is nowhere to be found despite using the post method, but the URL still contains valuable information

Is it worth the effort to incorporate HTML5 header, main, section elements, and more into your website?