using CSS to create responsive designs with multiple divs

After spending hours searching, I am still struggling to get two divs to sit next to each other at 50% width each, with a third div below that spans 100% width. The challenge is to make the layout responsive, so that when the screen size is reduced to around 960px, the right div moves under the left one.

I attempted some code for this layout, but encountered an issue where the right div shrinks as the browser size decreases. I'm aware that my approach may not be correct, but I am in the learning phase and seeking assistance regarding this basic question! Any guidance would be greatly appreciated!

To provide a clearer picture, I can share an image illustrating the desired outcome. Essentially, I need two divs side by side in one row (each at 50% width) and one full-width div in the second row.

For reference, the images used will vary in size and have different amounts of text below them. Please note that the example layout image provided is just for demonstration purposes and does not represent actual scale. Additionally, the site's background should remain clear without any color, as shown using contrasting colors in the example divs.

Below is how the responsive design should appear:

HTML:

<div class="custom_div">
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>

CSS:

.custom_div {
overflow:hidden;
}
.custom_div div {
min-height: 100%;
padding: 10px;
text-align: center;
}
#one {
background-color: gray;
float:left;
margin-right:0px;
width:50%;
}
#two {
background-color: white;
overflow:hidden;
margin-right: 20px;
margin: 1px;
width:auto;
min-height: 50%;
}
#three {
background-color: yellow;
margin-right:auto;
margin-left:auto;
width: 100%;
}
@media screen and (max-width: 600px) {
#one {
    float: none;
    margin-right:0;
    width:auto;
}
}

Answer №1

UPDATE:

Check out the Demo Fiddle here

To ensure correct sizing on varying amounts of content, the most reliable method is as follows:

HTML

<div class='table'>
    <div class='cell'></div>
    <div class='cell'></div>
    <div class='caption'></div>
</div>

CSS

.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
}
.caption {
    display:table-caption;
    caption-side:bottom;
}
.cell, .caption {
    height:20px;
    border:1px solid black;
}
@media screen and (max-width: 960px) {
    .table .cell, .caption {
        display:block;
    }
}

Original Answer

Have you considered this approach?

Link to the original demo fiddle

HTML

<div class="left">left</div>
<div class="right">right</div>
<div class="full">content</div>

CSS

div {
    border:1px solid black;
    box-sizing:border-box;.
    -moz-box-sizing:border-box;
}
.left, .right {
    width:50%;
}
.left {
    float:left;
}
.right {
    float:right;
}
@media screen and (max-width: 600px) {
    .left, .right {
        width:auto;
        float:none;
    }
}    

Answer №2

Check out the code snippet below:

See Demo

body, html{height:100%;}
.special_div{width:100%;}
.special_div div {
     background:#ccc;
     box-sizing:border-box;
     -moz-box-sizing:border-box;
 }
 #first, #second {
     width:50%;
     float:left;
     height:100%;
 }
 .clearfix{clear:both; display:block;}
 @media screen and (max-width: 960px) {
    #first, #second {
      width:auto;
      float:none;
    }
 }
 

Answer №3

Be sure to check out the latest version of the Fiddle here: http://jsfiddle.net/PEvLt/3/

I have eliminated unnecessary properties and identified the issue with padding and margins. To prevent these issues, always remember to utilize the BOX-SIZING property. This will be beneficial when incorporating padding along with widths/heights defined in percentages.

Learn more about Box-Sizing http://css-tricks.com/box-sizing/

UPDATE: To prevent overlapping of the third column, either wrap the first column in a single div or clear floats after the first 2 columns.

HTML :


<div class="first_two">
    <div id="one">
        <img src="http://lorempixel.com/500/200/" width="100%"/>
    </div>
    <div id="two">
        <img src="http://lorempixel.com/300/200/" width="100%"/>
    </div>
    <div class="clear"></div>
</div>
<div id="three">three</div>

CSS :


    *{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         
}
.first_two {
    background:#3498db;
    overflow:hidden;
}
#one {
    float:left;
    width:50%;
    height:100%;
}
#two {
    width:50%;
    float:left;
    height:100%;
}
#three {
    background-color:#8e44ad;
    width: 100%;
}
.clear{
    clear:both;
}
@media screen and (max-width: 600px) {
    #one,#two {
       width:100%;
    }
}

Answer №4

Adjust the width of the body tag dynamically with Javascript:

<script>
  document.getElementsByTagName("body")[0].style.width=screen.width+"px";
</script>

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

What is the best way to implement a hover effect on each direct child individually using CSS?

I have been attempting to create a tab bar with hover effects on its direct children, but I am facing some challenges. Below is the code snippet I have so far, which aims to apply an effect to each element inside the list individually. HTML code : < ...

Utilize a SCSS class defined in one file within a different SCSS file

In my React project, I have a day/night theme button that changes the main body color in the App.scss. It's a simple setup using body.light and body.dark. However, I need to also change the text color in the navigation bar, which is located in a diffe ...

What is the best way to ensure that third tier menus open in line with their respective items?

Check out this fiddle link: http://jsfiddle.net/Wss5A/72/ Focusing on the following: 2-A-1 2-A-2 2-A-3 The third-tier menu is currently displayed starting from the top left corner. I want the first submenu element to be aligned with either 2-A-1, 2-A- ...

I updated the color of my a:link using jQuery, but now my a:hover is not functioning as expected

Due to the readability issues of the navigation color against a specific image, I am looking to modify it for a particular page. Below is the HTML code: <div id='nav'> <ul> <li id='navBiog'> ...

Erase Content Inside the <div> Tag

Currently, I am employing JQUERY and CSS to modify the default content on a website. However, I have encountered the following piece of code: <div id="SortOptions"> Sort by: <select id="SortMain" class="improvedcatalogdropdown"> ...

As the user scrolls down, the navigation becomes obscured by the content

Whenever I scroll down on my website at Bradly Spicer, the navigation menu extends and ends up falling behind the content. This is the script I am using: .menu { position: relative; z-index:9999; } .post { background: #fff; border: 1px solid #ddd; font- ...

Expanding the rowspan within a table column has the effect of reducing its overall width

I have created a table with two rows, where the first row has three columns and the second row has two columns. The middle column in the first row has been set to rowspan="2". However, the issue is that it appears smaller than its intended width. .kolon ...

New inputs cannot be accepted by the form

HTML <form action="./Login.php" method="post" onsubmit="return checkInput();"> <table width="300" border="1"> <tbody> <tr> <th> UserName: </th> <td><input class="box" type="text" value="" name="uname" id="uname ...

Is it possible to adjust the size of a carousel image without compromising its quality?

In the carousel currently displayed on my website, there are three images that are enclosed within the following HTML tag: Despite exploring various online solutions, I have not been able to resolve the issue. Adjusting the height and width settings has o ...

JavaScript threw an error with message: 'Unexpected identifier' that was not caught

Upon launching Web Developer in Firefox: SyntaxError: missing } after property list note: { was opened at line 7, column 7 ...

Improve the loading speed of large datasets into HTML tables

I have a problem where I generate an HTML table from code behind to display data like a grid (Note: I am not using GridView). When the data is large, around 2000 rows, it causes the application to display a white page as if it has hung. What is the best w ...

Arrange the div and ensure that the external JavaScript file functions properly when the page loads

I am encountering an issue with my JavaScript and CSS code. It works perfectly fine within the fiddle environment but fails to function properly outside of it. Here is the link to the fiddle When I embed the code into an HTML document directly, it does n ...

Refreshing ng-model within a radio input

Currently, I am utilizing a jQuery library for radio/checkbox components. Although I am aware that combining jQuery with Angular is not ideal, the decision to use this particular library was out of my control and cannot be altered. One issue I have encount ...

Arranging elements next to each other in HTML

I'm currently in the process of building my first website as a developer and I could really use some assistance. I'm trying to align two items next to each other horizontally, but since I don't have experience with coding HTML, I'm feel ...

What could be causing my custom Google font in CSS to not function properly?

I've been trying to change the font-family from Google Fonts in my Bootstrap 5 project, but it's not working as expected. Here's a snippet of my code: HTML <div class="row"> <div class="col-lg-6 col-md-12" ...

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

Recently, I came across the <h:outputStylesheet/> tag with a converter attribute. I tried attaching a dummy (pass-through) converter to it, but to my surprise, nothing happened. Upon further investigation, it appears that the converter is not even in ...

Is there a problem with the way divs are being displayed when using jQuery to show the first 12 elements with the class "hide-show"?

I am encountering a problem with displaying data using the jQuery slice() and show() methods to reveal dynamically generated divs from a PHP function. The code is as follows: <style> .hide-show { display :none; } </style> <div class="c ...

Uncertainties surrounding the use of JSON data versus a JavaScript object

As a newcomer to programming, I have ventured into Stack Overflow and W3schools to enhance my skills. Recently, I created a small project for educational purposes. One dilemma is bothering me - is the JSON file I generated actually in proper JSON format o ...

Creating a triangle with SVG polygon: A step-by-step guide

I'm attempting to create a bottom triangle using SVG polygons, similar to the image below: https://i.stack.imgur.com/571FM.png Here is what I have tried so far: <svg xmlns="http://www.w3.org/2000/svg" height="150px" width="100%" viewBox="0 0 ...

Tips for avoiding flickering in a background image when it is being changed

Utilizing JavaScript, I am setting a repeated background image from a canvas to a div in the following way: var img_canvas = document.createElement('canvas'); img_canvas.width = 16; img_canvas.height = 16; img_canvas.getContext('2d' ...