What is the best way to create a three-column layout that completely fills the width of a page, utilizing pixel measurements on two of the columns

Question

What is the best way to create a three-column layout that completely fills the width of a page, utilizing pixel measurements on two of the columns

Is it possible to make div2 and Button2 fill the remaining width of the window while using pixel measurements on columns 1 and 3?

This formatting will be applied to a form where a textbox needs to adjust its size based on two fixed fields.

Appreciate your help!

CSS Styles

td { border:solid 1px #000; float:left; }

#div1 { width:100px; border:solid 1px #000; float:left; }
#div2 { border:solid 1px #000; float:left; }
#div3 { width:100px; border:solid 1px #000; float:right; }

#Button1 { width:100% }
#Button2 { width:100% }
#Button3 { width:100% }

HTML Markup

<div id="div1">
    <button id="Button1">Button 1</button>
</div>
<div id="div2">
    <button id="Button2">Button 2</button>
</div>
<div id="div3">
    <button id="Button3">Button 3</button>
</div>

css html

Answer 1

Answer №1

To address this issue, a potential remedy involves relocating the second DIV to the lower section and adding margins to it without utilizing float: Take a look at this example on JsFiddle

Answer 2

To address this issue, a potential remedy involves relocating the second DIV to the lower section and adding margins to it without utilizing float: Take a look at this example on JsFiddle

Answer 3

Answer №2

From what I understand, there are just a couple of ways to accomplish this:

Utilizing tables - although not everyone is a fan of this approach. Personally, I believe it's acceptable for the overall design as long as you don't get too carried away with nested tables and such. Kalle's response addresses this method
Using absolute positioning to specify all four corners. I recently came across this technique and it performs really well. It is compatible with all major browsers.

Here is an example similar to this:

#div1 { position:absolute; left: 0px; width: 100px; border:solid 1px #000; }
#div2 { position:absolute; left: 100px; right: 100px; border:solid 1px #000; }
#div3 { position:absolute; right: 0px; width:100px; border:solid 1px #000; float:right; }

Answer 4

From what I understand, there are just a couple of ways to accomplish this:

Utilizing tables - although not everyone is a fan of this approach. Personally, I believe it's acceptable for the overall design as long as you don't get too carried away with nested tables and such. Kalle's response addresses this method
Using absolute positioning to specify all four corners. I recently came across this technique and it performs really well. It is compatible with all major browsers.

Here is an example similar to this:

#div1 { position:absolute; left: 0px; width: 100px; border:solid 1px #000; }
#div2 { position:absolute; left: 100px; right: 100px; border:solid 1px #000; }
#div3 { position:absolute; right: 0px; width:100px; border:solid 1px #000; float:right; }

Answer 5

Answer №3

Here's a brain teaser for you all :)

<div class="maincontainer">
    <div class="column01">
        <div class="restraint">
            <p>Left column</p>
        </div>
    </div>
    <div class="column03">
        <div class="restraint">
            <p>Right column</p>
        </div>
    </div>
    <div class="column02">
        <div class="restraint">
            <p>Middle column</p>
        </div>
    </div>
</div>

and here is the corresponding CSS:

.maincontainer {
position:relative;
overflow:hidden;
}

.maincontainer .column01 {
float:left;
}

.maincontainer .column01 .restraint, .maincontainer .column03 .restraint {
width:200px;
}

.maincontainer .column03 {
float:right;
}

.maincontainer .column02 {
overflow:hidden;
}

.maincontainer .column02 .restraint {
width:100%;
}

* html .maincontainer .column02 {
display:inline-block;
}

Answer 6

Here's a brain teaser for you all :)

<div class="maincontainer">
    <div class="column01">
        <div class="restraint">
            <p>Left column</p>
        </div>
    </div>
    <div class="column03">
        <div class="restraint">
            <p>Right column</p>
        </div>
    </div>
    <div class="column02">
        <div class="restraint">
            <p>Middle column</p>
        </div>
    </div>
</div>

and here is the corresponding CSS:

.maincontainer {
position:relative;
overflow:hidden;
}

.maincontainer .column01 {
float:left;
}

.maincontainer .column01 .restraint, .maincontainer .column03 .restraint {
width:200px;
}

.maincontainer .column03 {
float:right;
}

.maincontainer .column02 {
overflow:hidden;
}

.maincontainer .column02 .restraint {
width:100%;
}

* html .maincontainer .column02 {
display:inline-block;
}

Answer 7

Answer №4

I might face criticism for utilizing the <table> element, however, it remains one of the most versatile and compatible methods across different browsers. Surprisingly, it even functions in IE5!

Check out this example on jsFiddle

Answer 8

I might face criticism for utilizing the <table> element, however, it remains one of the most versatile and compatible methods across different browsers. Surprisingly, it even functions in IE5!

Check out this example on jsFiddle

Answer 9

Answer №5

In this example, we demonstrate how to create a layout with three columns, two of which have fixed widths. Three columns: one takes up 100% and the other two have specific sizes.

JSFiddle Demo

CSS Styles

div, span, label, li, ul
{
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.header
{
    top:0px;
    left:0px;
    width:100%;
    height: 100px;
    display: table;
    position: absolute;
    border:1px solid orange; 
}
.row
{
    width:100%;
    display: table-row;
}

.left-column
{
    width:60px;
    height:100%;
    display: table-cell;
    white-space: nowrap;
    vertical-align: middle;

    border:1px solid black;
}
.left-column .icon
{
    width: 100%;
    text-align: center;

    border:1px solid red;
}

.center-column
{
    width: 100%;
    min-width:60px;
    text-align:center;
    display: table-cell;
    vertical-align: middle;

    border:1px solid black;
}
.right-column
{
    width:60px;
    height:100%;
    display: table-cell;
    white-space: nowrap;

    vertical-align: middle;

    border:1px solid black;
}
.right-column .logo
{
    width: 100%;
    text-align: center;

    border:1px solid red;
}

Answer 10

In this example, we demonstrate how to create a layout with three columns, two of which have fixed widths. Three columns: one takes up 100% and the other two have specific sizes.

JSFiddle Demo

CSS Styles

div, span, label, li, ul
{
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.header
{
    top:0px;
    left:0px;
    width:100%;
    height: 100px;
    display: table;
    position: absolute;
    border:1px solid orange; 
}
.row
{
    width:100%;
    display: table-row;
}

.left-column
{
    width:60px;
    height:100%;
    display: table-cell;
    white-space: nowrap;
    vertical-align: middle;

    border:1px solid black;
}
.left-column .icon
{
    width: 100%;
    text-align: center;

    border:1px solid red;
}

.center-column
{
    width: 100%;
    min-width:60px;
    text-align:center;
    display: table-cell;
    vertical-align: middle;

    border:1px solid black;
}
.right-column
{
    width:60px;
    height:100%;
    display: table-cell;
    white-space: nowrap;

    vertical-align: middle;

    border:1px solid black;
}
.right-column .logo
{
    width: 100%;
    text-align: center;

    border:1px solid red;
}

What is the best way to create a three-column layout that completely fills the width of a page, utilizing pixel measurements on two of the columns

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

A guide to placing tooltips dynamically in highcharts column charts

I'm having trouble getting the "flex direction: row" property to work within a table row

Convert a web page with embedded images using Base64 strings into a PDF file using JavaScript

issue arising where the table's border is not displaying

What is the method to modify the text color of an <option> in a <select> tag?

Obtain consistent outcomes by entering identical data in both Ajax and PHP

Manipulate and scale with jQuery

When the parent element is already set to justify its content with flexbox, you can ensure equal heights for CSS classes by utilizing

I plan to add new information to my table only when the user clicks on the submit button. This is what I have accomplished until now

Formatting a pair of elements side by side in MUI Select

Achieve a perfectly centered and responsive image placement on a webpage accompanied by a countdown timer

Images in gallery slider are excessively large

Skrollr immediate pop-up notification

Share an image using only the publish_actions authorization

jQuery Animated List - Nested items are unresponsive to clicks

Looking to create a pop-up using javascript, css, or jQuery?

Tips for changing the background color of a Qtextedit?

Python HTMLParser: Extracting HTML tag content made easy!

Creating Transparent Rounded Backgrounds in Google Chrome Packaged Apps: Achieving the same look as Google Hangout app

The Navbar in Bootstrap 3 remains expanded and does not collapse