Optimal menu layout based on window dimensions

Question

Optimal menu layout based on window dimensions

I'm encountering an issue with my menu layout: I have a container div set at 960px, which has a background image (image 2). I need to position another element to the left of image 2 that fits the space available on the left, and on the right side, there should be a div that fits the remaining space.

So, for example, if the resolution is 1024px, the left element should be 32px wide, the center should always be 960px, and the right element should be 32px. If the resolution is 2048px, the left element would be 544px, center: 960px, and right: 544px.

<div id="container-menu">
    <div id="left-bg">// This div needs to fit the space on the left //</div>
    <div id="center-bg">// Place menu and logo content here //</div>
    <div id="right-bg">// This div needs to fit the space on the right//</div>
</div>

Refer to the image below:

UPDATE:

Image 1 and Image 3 have a width of 1px and use repeat-x for the background

Image 2 has a width of 960px

All images are transparent PNG files.

Thank you!

html css background

Answer 1

Answer №1

To achieve this, utilize the CSS3 property called Flex.

Here is an example:

HTML

<div class="parent">
 <div class="left">1</div>
 <div class="middle">2</div>
 <div class="right">3</div>
</div>

CSS

.parent {
    display: -moz-box;
    -moz-box-orient: horizontal;
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    width: 100%;
}

.parent div{
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    height:40px;
}
.parent .middle{
    width:460px;
    background:yellow;
}
.left{background:red;}
.right{background:blue;}

Feel free to check out this demo link: http://jsfiddle.net/pMh97/1/

Answer 2

To achieve this, utilize the CSS3 property called Flex.

Here is an example:

HTML

<div class="parent">
 <div class="left">1</div>
 <div class="middle">2</div>
 <div class="right">3</div>
</div>

CSS

.parent {
    display: -moz-box;
    -moz-box-orient: horizontal;
    display:-webkit-box;
    -webkit-box-orient: horizontal;
    width: 100%;
}

.parent div{
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    height:40px;
}
.parent .middle{
    width:460px;
    background:yellow;
}
.left{background:red;}
.right{background:blue;}

Feel free to check out this demo link: http://jsfiddle.net/pMh97/1/

Optimal menu layout based on window dimensions

Answer №1

Similar questions

Join and authenticate

Position the Crossmark to align with text using CSS styling

Displaying an error message in the designated errors div is necessary when the regular expression does not produce a match

Adjust the parent div's background color when a radio button is selected

What are some effective ways to restrict users from downloading the HTML template from a demo site?

Aligning text or icon to center in React

Using jQuery to create animated effects for hidden input fields

Utilizing routing in Sencha for seamless back button functionality

"Using jQuery to trigger a click event on a specific column within

What is the correct syntax for implementing scrollTop and transform CSS effects in jQuery?

Steps for enabling/disabling dynamically added checkboxes dynamically

Issues with Django and Bootstrap Dropdown Lists Functionality

How can I show a dynamic popover with specific content when a "Copy" action is triggered?

Steps for implementing a select all feature with jQuery

Error encountered while validating jQuery word cloud

A single click causes the entire row of cards to extend seamlessly

Creating event listeners for slides transitioning forwards and backwards in Swiper JS: How can it be done?

How to create a smooth and continuous scrolling effect in the Twitter Bootstrap Carousel?

Acquiring Backlinks from an HTML Document

Customizing Bootstrap Navigation: Creating Space Between Menu Items