Achieve full-width centered div styling

Question

Achieve full-width centered div styling

I am facing a scenario where there are 3 divs, with the first and third div having width specified. I am looking to make the second div fill up the remaining space.

Check out this Fiddle for reference: http://jsfiddle.net/YzUQy/

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    float:left;
    border: 1px solid #ccc;
}

#div2{
   float:left;
    overflow: scroll;
    border: 1px solid #ccc;
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
    float:right;
}

css html

Answer 1

Answer №1

To achieve this layout, you can leverage the power of calc():

#div2{
    float:left;
    overflow: scroll;
    border: 1px solid #ccc;
    width: calc(100% - 420px - 20px - 6px - 290px); 
    /* Calculate based on div widths and padding */
}

Check out the demo on JSFiddle

For information on browser support for calc(), visit caniuse

Answer 2

To achieve this layout, you can leverage the power of calc():

#div2{
    float:left;
    overflow: scroll;
    border: 1px solid #ccc;
    width: calc(100% - 420px - 20px - 6px - 290px); 
    /* Calculate based on div widths and padding */
}

Check out the demo on JSFiddle

For information on browser support for calc(), visit caniuse

Answer 3

Answer №2

To achieve the desired layout, you can use display:table and display:table-cell. Here is an example implementation: http://jsfiddle.net/YzUQy/4/

Here is the CSS code:

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    border: 1px solid #ccc;
}

#div2 {
    overflow: scroll;
    border: 1px solid #ccc;
}

#div3 {
    width: 220px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
}

#container {
    display: table;
    width:700px;
}

#container > div {
    display:table-cell;
}

Answer 4

To achieve the desired layout, you can use display:table and display:table-cell. Here is an example implementation: http://jsfiddle.net/YzUQy/4/

Here is the CSS code:

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    border: 1px solid #ccc;
}

#div2 {
    overflow: scroll;
    border: 1px solid #ccc;
}

#div3 {
    width: 220px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
}

#container {
    display: table;
    width:700px;
}

#container > div {
    display:table-cell;
}

Answer 5

Answer №3

Ensure you have access to this valuable resource for current and future use:

In particular, make sure to bookmark this essential link:

HTML

<div class="content-wrapper">
   <div class="content">
</div>
<div class="left"></div>
<div class="right"></div>

CSS

.content-wrapper {
  float: left;
  width: 100%;
}
.content {
  margin: 0 200px 0 230px; /* set to the widths of right and left columns */
}
.left {
  float: left;
  width: 230px;
  margin-left: -100%;
  background: #C8FC98;
}
.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  background: #FDE95E;
}

Answer 6

Ensure you have access to this valuable resource for current and future use:

In particular, make sure to bookmark this essential link:

HTML

<div class="content-wrapper">
   <div class="content">
</div>
<div class="left"></div>
<div class="right"></div>

CSS

.content-wrapper {
  float: left;
  width: 100%;
}
.content {
  margin: 0 200px 0 230px; /* set to the widths of right and left columns */
}
.left {
  float: left;
  width: 230px;
  margin-left: -100%;
  background: #C8FC98;
}
.right {
  float: left;
  width: 200px;
  margin-left: -200px;
  background: #FDE95E;
}

Answer 7

Answer №4

To position the center element absolutely, follow these steps:

http://jsfiddle.net/9eGVA/

#container {
    position:relative;
}

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    float:left;
    border: 1px solid #ccc;
}

#div2{
   position:absolute;
    overflow: scroll;
    border: 1px solid #333;
    left:292px; /* total width of div1 */
    right:442px; /* total width of div2 */
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
    float:right;
}

Take into account the total width, including padding and borders, for proper positioning.

Answer 8

To position the center element absolutely, follow these steps:

http://jsfiddle.net/9eGVA/

#container {
    position:relative;
}

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    float:left;
    border: 1px solid #ccc;
}

#div2{
   position:absolute;
    overflow: scroll;
    border: 1px solid #333;
    left:292px; /* total width of div1 */
    right:442px; /* total width of div2 */
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
    float:right;
}

Take into account the total width, including padding and borders, for proper positioning.

Answer 9

Answer №5

If you're looking to create a flexible layout, consider using flexbox. Here's an example on how to achieve this: http://jsfiddle.net/fred02138/JDqQu/

<div id="outer">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

Here is the corresponding CSS:

#outer {
    display: -webkit-flex;
   -webkit-flex-direction: row;
    display: flex;
    flex-direction: row;
    width: 100%;    
}

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    border: 1px solid #ccc;
}

#div2{
    overflow: scroll;
    border: 1px solid #ccc;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
}

Answer 10

If you're looking to create a flexible layout, consider using flexbox. Here's an example on how to achieve this: http://jsfiddle.net/fred02138/JDqQu/

<div id="outer">
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>
</div>

Here is the corresponding CSS:

#outer {
    display: -webkit-flex;
   -webkit-flex-direction: row;
    display: flex;
    flex-direction: row;
    width: 100%;    
}

#div1{
    height:auto;
    text-align:center;
    width:290px;
    left:0;
    border: 1px solid #ccc;
}

#div2{
    overflow: scroll;
    border: 1px solid #ccc;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}

#div3{
    width: 420px;
    border: 1px solid #ccc;
    right:2px;
    padding:10px;
}

Achieve full-width centered div styling

Answer №1

Answer №2

Answer №3

HTML

CSS

Answer №4

Answer №5

Similar questions

What steps can I take to prevent my menu items from overlapping in the mobile navigation menu?

Can a piece of code be created that generates the XPath for a specific element?

What is the best way to link the roll button to a specific video URL?

Clickable label for checkbox in Android browser is unresponsive

The formatting of the datepicker-popup is malfunctioning when the initial value is set within the scope

Customize your Google Translate experience by choosing your own option values

Ways to adjust the div height to match the span height

Enhance Your Images with Hovering Icons

Eliminate extra spacing in the panel-footer on mobile devices

Tips for updating the color of table data when the value exceeds 0

"Mastering the art of text animation: A beginner's guide

The table is refusing to align itself in the center

Customizing Bootstrap styles with a custom CSS file

How can the Bootstrap Jumbotron element be adjusted to perfectly fill the width of the screen?

Communicate through PHP and JavaScript chat to display HTML content in the chat window

Ways to retrieve the text linked to a checkbox

How can JSON data objects be transmitted to the HTML side?

I have organized two <h4>, <img>, and <p> tags into individual <div> elements. To prevent overlap, I floated the image and used <br> tags to create separation between the <div> elements. However, they still overlap despite these efforts

What is the best way to synchronize the scale of images with the tempo of a song?

PHP - Dynamically populating form questions based on user input