Achieving responsive design for div tags: Automatically adjust the width of left and right div tags to fit the screen, while maintaining the static

Question

Achieving responsive design for div tags: Automatically adjust the width of left and right div tags to fit the screen, while maintaining the static

I need help figuring out how to automatically adjust the width of div 'one' and div 'three' to the screen side while keeping the width of div 'two' static using CSS. All three divs should be in the same row.

Here is my HTML code:

<html>
<header<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="x">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div><!-- close div 'x' -->
</body>
</html>

And this is the CSS I have so far:

    #x {height:34px; border:1px solid gray;}
#one {height:30px; border:1px solid red;; width:auto; float:left;}
#two {height:30px; border:1px solid green; width:660px; float:left;}
#thr {height:30px; border:1px solid blue; width:auto; float:left;}

Any suggestions would be greatly appreciated. Thank you for your help!

html css

Answer 1

Answer №1

Check out this example My Code

Here is the HTML code:

<div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

And the corresponding CSS:

.wrapper {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
    display: box;
    box-orient: horizontal;
    box-align: stretch;
    color: #ffffff;
}

div {
    height: auto;
}

.box1 {
    background-color: #112233;
}

.box2 {
    background-color: #445566;
    width: 500px;
}

.box3 {
    background-color: #778899;
}

.box1, .box3 {
    -webkit-box-flex: 1.0;
    -moz-box-flex: 1.0;
    box-flex: 1.0;
}

Answer 2

Check out this example My Code

Here is the HTML code:

<div class="wrapper">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

And the corresponding CSS:

.wrapper {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
    display: box;
    box-orient: horizontal;
    box-align: stretch;
    color: #ffffff;
}

div {
    height: auto;
}

.box1 {
    background-color: #112233;
}

.box2 {
    background-color: #445566;
    width: 500px;
}

.box3 {
    background-color: #778899;
}

.box1, .box3 {
    -webkit-box-flex: 1.0;
    -moz-box-flex: 1.0;
    box-flex: 1.0;
}

Answer 3

Answer №2

Before proceeding, ensure that the IDs match correctly. Remember, thr is not the same as three.

Here are the modifications I have made to the CSS:

Indented the code for better readability.
Specified the widths of the divs as a percentage of the parent div's size. Previously, the widths were not defined.
Included a slight padding to center the 3 inner divs within the outer div.

Below is the updated CSS code:

#x 
 {
  position:relative;
  padding:1.5px;
  height:34px;
  border:1px solid gray;
 }
#one 
 { 
  height:30px;
  border:1px solid red;
  width:33%;
  float:left; 
 }
#two 
 {
  height:30px; 
  border:1px solid green; 
  width:33%;
  float:left;
 }
#three 
 {
  height:30px;
  border:1px solid blue;
  width:33%;
  float:left;
 }

Answer 4

Before proceeding, ensure that the IDs match correctly. Remember, thr is not the same as three.

Here are the modifications I have made to the CSS:

Indented the code for better readability.
Specified the widths of the divs as a percentage of the parent div's size. Previously, the widths were not defined.
Included a slight padding to center the 3 inner divs within the outer div.

Below is the updated CSS code:

#x 
 {
  position:relative;
  padding:1.5px;
  height:34px;
  border:1px solid gray;
 }
#one 
 { 
  height:30px;
  border:1px solid red;
  width:33%;
  float:left; 
 }
#two 
 {
  height:30px; 
  border:1px solid green; 
  width:33%;
  float:left;
 }
#three 
 {
  height:30px;
  border:1px solid blue;
  width:33%;
  float:left;
 }

Achieving responsive design for div tags: Automatically adjust the width of left and right div tags to fit the screen, while maintaining the static

Answer №1

Answer №2

Similar questions

Exploring an Array Based on User's Input with JavaScript

What is the method to incorporate spread into inner shadow within an SVG file?

mentioning a JSON key that includes a period

How can I use jQuery to pre-select an option in two connected dropdown lists that are populated with JSON data?

Utilize VBA in Excel to interact with a jQuery button on a web page

Unable to use document.write when extracting code from the internet

Navigate Behind Slider on Scrolling

Receiving the [object HTMLInputElement] on the screen rather than a numerical value

Tips for dynamically resizing a div element as a user scrolls, allowing it to expand and contract based on

Alter the font color of text using JavaScript in an HTML document

Programmatically simulate a text cursor activation as if the user has physically clicked on the input

Is there a way to trigger validation with a disabled property?

What steps do I need to take in order to accomplish this specific CSS

Update the sum upon deleting a feature in an HTML and JavaScript form

New and improved Bootstrap 5 menu bar

Is there an issue with this website link?

Having trouble with submitting the code - need help resolving the issue

Adjust vertical dimension using rich text editor tag

Developing a PHP foreach loop that integrates seamlessly with a W3 responsive grid

Denied rendering of design due to incompatible MIME type