Placing two items at opposite extremes of a full-width display with a header

Question

Placing two items at opposite extremes of a full-width display with a header

Despite the abundance of resources on CSS positioning, I constantly find myself revisiting this topic because it continues to perplex me with no clear solution in sight.

Let's simplify things. Imagine a header div with a width of 100%, like this:

<div style="width: 100%; height: 100px;">

</div>

Now, within this div on the left side of the screen are 4 links enclosed in a container div while on the right side, there are two links within another container div. These containers have set widths, leaving empty space in the middle.

<div style="width: 100%; height: 100px;">

<div style="width: 400px">
<div style="float: left; margin-left: 5px;">link1</div>
<div style="float: left; margin-left: 5px;">link2</div>
<div style="float: left; margin-left: 5px;">link3</div>
<div style="float: left; margin-left: 5px;">link4</div>
</div>

<div style="width: 200px">
<div style="float: left; margin-left: 5px;">link1</div>
<div style="float: left; margin-left: 5px;">link2</div>
</div>

</div>

The dilemma is how to make these fixed-sized containers align at each end of the fluid 100% container without overlapping or dropping below when the browser window is resized. The goal is to avoid scrollbars or JavaScript solutions altogether.

Is there a way for these fixed-size containers to remain snugly positioned as the page shrinks?

Floats and inline-block display properties haven't provided a resolution. Creating a large fixed-size container is not an option as the width must be maintained at 100%. Currently relying on Javascript to hide the right links upon shrinking the page size, which is less than ideal.

Is there truly no workaround for this predicament?

html css

Answer 1

Answer №1

Embracing the power of flexible boxes!

#container {
  display: flex; /* Unlocking the magic! */
  height: 100px;
  border: 3px solid red;
}
#left-column {
  width: 400px; /* Ideal width, adjusts for narrow windows */
  border: 3px solid blue;
}
#right-column {
  width: 200px; /* Ideal width, adjusts for narrow windows */
  margin-left: auto; /* Move it to the right */
  border: 3px solid green;
}
#container > div > div { /* Additional styles */
  float: left;
  margin-left: 5px;
}

<div id="wrapper">
  <div id="left">
    <div>link1</div>
    <div>link2</div>
    <div>link3</div>
    <div>link4</div>
  </div>
  <div id="right">
    <div>link1</div>
    <div>link2</div>
  </div>
</div>

Answer 2

Embracing the power of flexible boxes!

#container {
  display: flex; /* Unlocking the magic! */
  height: 100px;
  border: 3px solid red;
}
#left-column {
  width: 400px; /* Ideal width, adjusts for narrow windows */
  border: 3px solid blue;
}
#right-column {
  width: 200px; /* Ideal width, adjusts for narrow windows */
  margin-left: auto; /* Move it to the right */
  border: 3px solid green;
}
#container > div > div { /* Additional styles */
  float: left;
  margin-left: 5px;
}

<div id="wrapper">
  <div id="left">
    <div>link1</div>
    <div>link2</div>
    <div>link3</div>
    <div>link4</div>
  </div>
  <div id="right">
    <div>link1</div>
    <div>link2</div>
  </div>
</div>

Answer 3

Answer №2

To ensure proper layout, it is recommended to set a minimum width of 600px along with using the width:100% on the container div. Without this setup, the options left are for elements to either overlap (using position: absolute) or stack below each other (floats alone). Depending on the browser used, it will respect the min-width specified, or at the very least keep the right/left links in place.

If needed, CSS media queries can be implemented to show/hide elements at different screen widths as desired.

It's advisable not to utilize inline styles like this example demonstrates, as it limits flexibility and makes updating more complicated.

.outer {
  width: 100%;
  min-width: 600px;
  height: 100px;
  background-color: #555;
}

.leftLinks {
  width: 400px;
  position: absolute;
  float: left;
  background-color: #999;
}

.rightLinks {
  width: 200px;
  position: relative;
  float:right;
  background-color: #999;
}

li {
  float: left;
  display: inline-block;
  margin-left: 5px;
}

<div class="outer">

<div class="leftLinks">
  <ol>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
  </ol>
</div>

<div class="rightLinks">
  <ol>
    <li>link1</li>
    <li>link2</li>
  </ol>
</div>

</div>

Answer 4

To ensure proper layout, it is recommended to set a minimum width of 600px along with using the width:100% on the container div. Without this setup, the options left are for elements to either overlap (using position: absolute) or stack below each other (floats alone). Depending on the browser used, it will respect the min-width specified, or at the very least keep the right/left links in place.

If needed, CSS media queries can be implemented to show/hide elements at different screen widths as desired.

It's advisable not to utilize inline styles like this example demonstrates, as it limits flexibility and makes updating more complicated.

.outer {
  width: 100%;
  min-width: 600px;
  height: 100px;
  background-color: #555;
}

.leftLinks {
  width: 400px;
  position: absolute;
  float: left;
  background-color: #999;
}

.rightLinks {
  width: 200px;
  position: relative;
  float:right;
  background-color: #999;
}

li {
  float: left;
  display: inline-block;
  margin-left: 5px;
}

<div class="outer">

<div class="leftLinks">
  <ol>
    <li>link1</li>
    <li>link2</li>
    <li>link3</li>
    <li>link4</li>
  </ol>
</div>

<div class="rightLinks">
  <ol>
    <li>link1</li>
    <li>link2</li>
  </ol>
</div>

</div>

Placing two items at opposite extremes of a full-width display with a header

Answer №1

Answer №2

Similar questions

When working with basic shapes such as "rect" or "circle," the inline SVG may not be displayed

What is the reason that setTimeout does not delay calling a function?

How to deactivate or modify the href attribute of an anchor element using jQuery

How to create a captivating image effect using CSS on hover

Experiencing difficulties with utilizing height percentages for CSS divs

Using jQuery to move a div to a specific location on the page

Mastering the art of combining images and text harmoniously

What is the best way to send HTML tag content to mark.js and delimit them with a space or comma?

Spin a three-dimensional picture

Using jQuery's toggle function with a double click event to change the display to none

An unexpected error has occurred in the browser console: The character '@' is not valid

Transforming an HTML file into a Vue.js component

Looking for a drum set with clickable buttons? Having trouble changing the background color in CSS/HTML? Wondering how to map keyboard keys to HTML buttons?

Avoiding the appearance of a scrollbar when content extends beyond its containing block

Eliminate the div element using jQuery if it contains a line break tag but no text

Switch between including 'light' or 'dark' styles using Javascript?

Animated div or fieldset featuring a multi-step form

Issues occur with Google visualization when the screen is resized

Issue encountered while determining the specificity of a CSS selector involving pseudo-classes

Difficulties encountered when adjusting the size or reducing the images in a Cycle2 slideshow