CODEWITHSUNDEEP
htmlcsslayout
Twifty
Twifty

Reputation: 3378

A 3 column HTML layout

There are many many questions, answers and tutorials related to a 3 column design, but none of them have helped solve my particular problem.

I have two text inputs surrounding a select control, which I need to display in a single line. The problem stems from the fact that I use a jQuery library to style the controls. Both text inputs are designed to fill their parent container, but the center select is given a width specific to its content.

The normal way to handle this layout would be to use margins and floats, all of which require knowledge of the center columns width beforehand.

This fiddle is the closest solution I can find, but it still requires hard coded values. The .content:width is set on page load by javascript. Here I have given it a random value. The .left, .right widths have a hard coded value which I'd like to remove.

<div class="wrapper">
    <div class='left'></div>
    <div class='right'></div>
    <div class='center'><div class='content'></div></div>
</div>

.center {
    text-align: center;
}
.content {
    /* The width and display come from javascript. */
    display: inline-block;
    width: 64px;
    height: 50px;
    border: 2px dashed #00f;
}
.left, .right {
    float: left;
    width: calc(50% - 40px);
    height: 50px;
    border: 2px dashed #f0f;
}
.right {
    float: right;
}

I know this can easily be done using javascript, but I would prefer CSS only answers.

Upvotes: 0

Views: 48

Answers (2)

SamuelMS
SamuelMS

Reputation: 1146

Are you looking for something like this?

HTML

<div class="wrapper">
    <div class='left'></div>
    <div class='center'><div class='content'></div></div>
    <div class='right'></div>
</div>

CSS

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.center {
    text-align: center;
}
.content {
    /* The width and display come from javascript. */
    display: inline-block;
    width: 64px;
    height: 50px;
    border: 2px dashed #00f;
}
.left, .right {
    flex-grow: 1;
    height: 50px;
    border: 2px dashed #f0f;
}
.right {
    float: right;
}

The center has a fixed width and the side elements fill the space.

jsFiddle

If not, could you elaborate a bit more?

Upvotes: 1

user3742922
user3742922

Reputation:

I recommend you to use bootstrap css : you have have an excellent system of grid that allows you to do whatever you want getbootstrap.

Upvotes: 0

Related Questions