Arrange two div elements side by side so they remain adjacent even when you adjust the browser size

Question

Arrange two div elements side by side so they remain adjacent even when you adjust the browser size

After years of success with my floated left and right divs, I am now facing a challenge with responsive design. No longer able to rely on fixed widths, I find that when the screen size decreases, the right div moves below the left one.

I know that using fixed widths or wrapping both divs together can solve this issue, but I need a solution that doesn't involve fixed sizes. How can I ensure that both divs stay side by side, even as the screen size changes?

As a newcomer to responsive design, I have managed to work through most issues, but this particular problem has me stumped. In the past, I always used fixed values, so this is a new challenge for me.

html css responsive-design

Answer 1

Answer №1

There is a way to partially achieve this.

When it comes to HTML markup, you can use the following:

<div id="main">
    <div id="one"></div>
    <div id="two"></div>
</div>

For CSS styling, you can implement the following:

#main{
    height:200px;
    width:100%;

}
#one{
    width:50%;
    background-color:#cccccc;
    height:100%;
    float:left;
}
#two{
    width:50%;
    background-color:#ccffff;
    height:100%;
    float:left;
}

Here is a live example on JSFiddle

Using CSS media queries, you can target specific screen resolutions for a more responsive design approach.

Answer 2

There is a way to partially achieve this.

When it comes to HTML markup, you can use the following:

<div id="main">
    <div id="one"></div>
    <div id="two"></div>
</div>

For CSS styling, you can implement the following:

#main{
    height:200px;
    width:100%;

}
#one{
    width:50%;
    background-color:#cccccc;
    height:100%;
    float:left;
}
#two{
    width:50%;
    background-color:#ccffff;
    height:100%;
    float:left;
}

Here is a live example on JSFiddle

Using CSS media queries, you can target specific screen resolutions for a more responsive design approach.

Arrange two div elements side by side so they remain adjacent even when you adjust the browser size

Answer №1

Similar questions

AngularJS - Create Alert Pop-Up for Missing Input Fields

Ways to remove the address bar from a mobile browser like Chrome or an Android browser

Unable to view image when using material-ui CardMedia component

:selected element malfunctioning

Having difficulty maintaining the consistent size of the MathJax math font in relation to the surrounding text

Steps for compiling Sass to CSS without encountering any npm errors:

Eliminating Google Adsense from Blog Posts

Deciphering the Mysteries of HTTP Headers

When I hover over my divs, my span is positioned behind them

Is it possible to use jQuery/JS to automatically format currency input as it is typed, adding a 1000 separator and ensuring

Analyzing the string's worth against the user's input

Locate the XPath for text that is within a div tag and adjacent to a span tag

Creating an animated link with a dynamic underline featuring a trio of vibrant colors

Learn how to dynamically disable or hide the "Today" button in an angular-ui datepicker based on whether it is the weekend

Performing date comparison in JavaScript with varying date formats

What CSS attribute determines the distinction in visual presentation between two elements that share the same CSS configurations?

The <nav> and <section> elements are not appearing on the page

Concealing a Column within a Hierarchical HTML Table

The CSS styles are not immediately applied when the window is resized; they are only applied when scrolling

Creating AngularJS variables with dependencies on integer values