Utilize CSS to occupy the rest of the container's width

Question

Utilize CSS to occupy the rest of the container's width

I have a header bar with three elements - a left section, a middle section, and a right section. I want the middle section to automatically fill up the remaining space in the header. How can I achieve this?

header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
}

<header>
  <img src="https://picsum.photos/100"/>
  <div id="middle">222</div>
  <div id="right">333</div>
</header>

html css

Answer 1

Answer №1

Try using the calc function for precise width adjustments!

Check out this link for a live example

Here is an example of how to use it in your HTML and CSS:

<div class="left">
  This div is set to be exactly 100 pixels wide!
  </div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
    This div fills up the rest of the available width!
  </div>

To achieve this layout, you can style your elements with the following CSS:

.left {
  display: inline-block;
  width: 100px;

  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);

  background: blue;
  color: white;
}

Update: If you prefer having no space between the two divs, you can also try setting font-size: 0 on the outer element as an alternative method.

Answer 2

Try using the calc function for precise width adjustments!

Check out this link for a live example

Here is an example of how to use it in your HTML and CSS:

<div class="left">
  This div is set to be exactly 100 pixels wide!
  </div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
    This div fills up the rest of the available width!
  </div>

To achieve this layout, you can style your elements with the following CSS:

.left {
  display: inline-block;
  width: 100px;

  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);

  background: blue;
  color: white;
}

Update: If you prefer having no space between the two divs, you can also try setting font-size: 0 on the outer element as an alternative method.

Answer 3

Answer №2

If you want to achieve this specific layout, you can utilize CSS table-cells.

To implement this layout, make some adjustments to your HTML code:

<div id="header">
    <div class="container">
        <div class="logoBar">
            <img src="http://placehold.it/50x40" />
        </div>
        <div id="searchBar">
            <input type="text" />
        </div>
        <div class="button orange" id="myAccount">My Account</div>
        <div class="button red" id="basket">Basket (2)</div>
    </div>
</div>

You just need to remove the wrapper element around the two .button elements.

Add the following CSS styling:

#header {
    background-color: #323C3E;
    width:100%;
}
.container {
    display: table;
    width: 100%;
}
.logoBar, #searchBar, .button {
    display: table-cell;
    vertical-align: middle;
    width: auto;
}
.logoBar img {
    display: block;
}
#searchBar {
    background-color: #FFF2BC;
    width: 90%;
    padding: 0 50px 0 10px;
}

#searchBar input {
    width: 100%;
}

.button {
    white-space: nowrap;
    padding:22px;
}

Set display: table to .container with a width of 100%.

For .logoBar, #searchBar, and .button, apply display: table-cell.

Adjust the width of #searchBar to 90%, causing other elements to adjust accordingly.

Use text-align and vertical-align in the table cells as needed.

You can view a demo here: http://jsfiddle.net/audetwebdesign/zWXQt/

Answer 4

If you want to achieve this specific layout, you can utilize CSS table-cells.

To implement this layout, make some adjustments to your HTML code:

<div id="header">
    <div class="container">
        <div class="logoBar">
            <img src="http://placehold.it/50x40" />
        </div>
        <div id="searchBar">
            <input type="text" />
        </div>
        <div class="button orange" id="myAccount">My Account</div>
        <div class="button red" id="basket">Basket (2)</div>
    </div>
</div>

You just need to remove the wrapper element around the two .button elements.

Add the following CSS styling:

#header {
    background-color: #323C3E;
    width:100%;
}
.container {
    display: table;
    width: 100%;
}
.logoBar, #searchBar, .button {
    display: table-cell;
    vertical-align: middle;
    width: auto;
}
.logoBar img {
    display: block;
}
#searchBar {
    background-color: #FFF2BC;
    width: 90%;
    padding: 0 50px 0 10px;
}

#searchBar input {
    width: 100%;
}

.button {
    white-space: nowrap;
    padding:22px;
}

Set display: table to .container with a width of 100%.

For .logoBar, #searchBar, and .button, apply display: table-cell.

Adjust the width of #searchBar to 90%, causing other elements to adjust accordingly.

Use text-align and vertical-align in the table cells as needed.

You can view a demo here: http://jsfiddle.net/audetwebdesign/zWXQt/

Answer 5

Answer №3

To achieve this layout, you can utilize flexbox.

Set your container element (in this case header) to use display: flex. Then, in the element you want to span the full width, apply flex-grow: 1.

header {
  background: red;
  display: flex;
}

#middle {
  background: orange;
  flex-grow: 1;
}

#right {
  background: green;
}

<header>
  <img src="https://picsum.photos/100"/>
  <div id="middle">222</div>
  <div id="right">333</div>
</header>

Answer 6

To achieve this layout, you can utilize flexbox.

Set your container element (in this case header) to use display: flex. Then, in the element you want to span the full width, apply flex-grow: 1.

header {
  background: red;
  display: flex;
}

#middle {
  background: orange;
  flex-grow: 1;
}

#right {
  background: green;
}

<header>
  <img src="https://picsum.photos/100"/>
  <div id="middle">222</div>
  <div id="right">333</div>
</header>

Answer 7

Answer №4

To create a visually appealing layout, you can enclose the image and search bar within their own container. Float the image to the left with a specific width to separate it from other elements on the page.

By taking the image out of the normal flow, you prevent other items from adjusting their position around it. To ensure that the search bar appears correctly positioned next to the image, add a left padding equal to the image's width plus some space.

This technique results in a fixed-width image while allowing the rest of the container block to dynamically adjust based on the search bar's content.

<div class="container">
  <img src="img/logo.png"/>
  <div id="searchBar">
    <input type="text" />
  </div>
</div>

Here is the corresponding CSS:

.container {
  width: 100%;
}

.container img {
  width: 50px;
  float: left;
}

.searchBar {
  padding-left: 60px;
}

Answer 8

To create a visually appealing layout, you can enclose the image and search bar within their own container. Float the image to the left with a specific width to separate it from other elements on the page.

By taking the image out of the normal flow, you prevent other items from adjusting their position around it. To ensure that the search bar appears correctly positioned next to the image, add a left padding equal to the image's width plus some space.

This technique results in a fixed-width image while allowing the rest of the container block to dynamically adjust based on the search bar's content.

<div class="container">
  <img src="img/logo.png"/>
  <div id="searchBar">
    <input type="text" />
  </div>
</div>

Here is the corresponding CSS:

.container {
  width: 100%;
}

.container img {
  width: 50px;
  float: left;
}

.searchBar {
  padding-left: 60px;
}

Answer 9

Answer №5

Using CSS:

max-width: -moz-available;

Answer 10

Using CSS:

max-width: -moz-available;

Answer 11

Answer №6

If I were to create a search bar, I would approach it in this way:

<div id='search-logo-bar'><input type='text'/></div>

Using the following CSS styling:

div#search-logo-bar {
    padding-left:15%;
    background:#666 url(logo.png) no-repeat left center;
    background-size:20%;
}
input[type='text'] {
    display:block;
    width:80%;
}

To see a demo of this implementation, visit:

http://jsfiddle.net/5MHnt/

Answer 12

If I were to create a search bar, I would approach it in this way:

<div id='search-logo-bar'><input type='text'/></div>

Using the following CSS styling:

div#search-logo-bar {
    padding-left:15%;
    background:#666 url(logo.png) no-repeat left center;
    background-size:20%;
}
input[type='text'] {
    display:block;
    width:80%;
}

To see a demo of this implementation, visit:

http://jsfiddle.net/5MHnt/

Answer 13

Answer №7

To simplify your search process, just insert the image into the searchBar division.

<div id="searchBar">
    <img src="images/logo.png" />                
    <input type="text" />
</div>

Answer 14

To simplify your search process, just insert the image into the searchBar division.

<div id="searchBar">
    <img src="images/logo.png" />                
    <input type="text" />
</div>

Answer 15

Answer №8

After exploring various possible solutions, I conducted a brief experiment. Here is the result:

http://jsbin.com/hapelawake

Answer 16

After exploring various possible solutions, I conducted a brief experiment. Here is the result:

http://jsbin.com/hapelawake

Utilize CSS to occupy the rest of the container's width

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

transforming a text input into unadorned plain text

The text-overflow property with ellipsis functionality appears to be malfunctioning in Internet Explorer when applied to input elements, yet functions

Learn how to efficiently transfer a dynamic subtitle text value from an HTML5 video player to a database

I am experiencing issues with how the data from the database is being displayed

When the value is inputted into the textbox and the enter key is pressed, a fresh chip displaying the entered value will materialize

Combining multiple rows into a single row and inserting a new column

HTML - Lists Not Displaying Properly in Numerical Order

Utilize the apostrophe-images-widgets custom widget by calling apos.attachments.url function twice

Steps to set a background image for an entire page in VueJS

sending live video from a Python server to a browser-based client

Using the <a href> tag to send emails directly from within an HTML document

Guide for implementing tabs using router-view in Vue.js

First-character styling not applying to ID in CSS

Can one intercept the window.location.replace event?

Restricting thumbnail scrolling within the visible area in a jQuery/CSS Gallery/Slideshow

Managing the vertical positioning of grid items: tips and tricks

Discovering an Improved Method for Implementing a Functional jQuery Menu Bar

The power of Geolocation API coupled with the efficiency of AJAX requests

Image fails to download on Safari and iPhones in PHP

What is the best way to distinguish Xpath when dealing with several elements that share identical attributes and text?