Calculate space for inline-block elements using css
I am trying to customize the title / navigation bar of a website. On the left side I have a logo area, on the right a couple of buttons / links, and in the middle I have an empty filler space so that the logo is pushed to the left and links to the right.
Basically I have everything as inline-block
elements inside a parent that has text-align: center
. Thus, they are focused on the screen, but still expand to the left and right. Also, everything inside div
that 90%
has the full width of the screen, so there is extra space on the sides.
Here's a script to demonstrate what I have
The problem is that when the window is really large, the logo isn't far left and the links aren't too far to the right (I want them to be mostly right at the far edges 90% centered on the center). However, when the window gets small its perfect (especially before my media query takes effect).
I used 50% width as the fill space in the middle, but I need more space as the window gets bigger (maybe as a fill space 80%
), is there a way to make the width %
empty space get larger for the window only changes with css (and without 20 media queries for 100px difference)?
If the logo and links have set properties width
I can use calc()
but they don't and I would like to avoid static width values
Also, I don't want to use float !!!
source to share
There are several ways to do this. float
, display: table
/ table-cell
and of course flex
.
Flex is new, but most likely the future, and its current version is much more standard than previous ones.
Check out the demo built with FlexyBoxes :
Demo launch
Created using only floppy disk settings white-space: nowrap
in <ul>
and flex-container{ display: inline-block; }
in the media request for low resolution.
Also check out this potentially interesting answer.
source to share
I feel like you are looking for display: table / table-cell and not inline-block
#bar {
font-family: arial;
background: #eee;
}
.space {
width: 50%;
background: blue;
height: 3px;
}
.text-padding {
padding: 10px 0;
}
.text-align-center {
text-align: center;
}
li {
display: inline-block;
}
.centered {
width: 90%;
margin: 0 auto;
background: tomato;
display: table;
}
.centered div {
display: table-cell;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 330px) {
.logo-text {
display: block;
}
.navigation {
display: block;
}
.li {
display: block;
}
.space {
display: none;
}
}
<div id='bar'>
<div class='centered text-align-center'>
<div class='text-padding logo-text'>
Logo
</div>
<div class='space'></div>
<div class='navigation'>
<ul>
<li class='li text-padding'>
one
</li>
<li class='li text-padding'>
two
</li>
<li class='li text-padding'>
three
</li>
</ul>
</div>
</div>
</div>
source to share
* Edited to provide a solution without floats *
You can simply add another media query to adjust the spacer size when the screen width allows:
@media (min-width: 800px) {
.space {
width: 70%;
}
}
https://jsfiddle.net/u93wwLvv/8/
Add as many media queries as you like.
source to share