Why is the 3rd div not on the same line?
Because there is not enough room for them at that size.
They are 33% width which you may think would fit, but add to that the 2px for the border on each one, then the space you get from each being on a new line in the html and it adds up to more than one third.
2 Likes
Pick one, or all 3. Copy to PC, Open in favorite browser.
one-row,3a-inline-blocks.html (889 Bytes)
one-row,3b-inline-blocks.html (1003 Bytes)
one-row,3-table-cells.html (981 Bytes)
1 Like
Hereās my 2Ā¢ on itā¦
3a-inline-blocks.html
Iād stay away from any form of tag chaining in the html. It ruins the structured indention that well written html should have.
3b-inline-blocks.html
After Webkit constructs itās anonymous table-cells around the inline-blocks you essentially wind up the table-cell version. Thatās why Webkit ignores the word spacing, it doesnāt allow word spacing to work on table-cells. Hence the appearance that inline-blocks have collapsed their white-space nodes.
Negative values on word spacing was one situation where the specs allowed differences. But who would ever want words actually overlapping on top of each other and jumbling the letters together. Apparently Webkit thought that might be a good idea and theyāve never seen fit to change it.
All other browsers collapse negative values. So even if itās word-spacing:-10em; the words donāt layer on top each other, they will just butt up and appear as one continuous word.
3-table-cells.html
Is what I would go with unless I really needed the native behavior of inline-blocks. 
1 Like
I agree up to a point. I donāt like the ārun togetherā look of āchainedā tags. The first thing I do when faced with āchainedā tags is properly indent them.
I depart from strict avoidance of āchainsā in this case because they clearly demonstrate the absence of white space nodes in this simple, 3-element chain. Something a novice might be able to grasp. Plus, they are valid and they work. Remember that he posted the inline-blocks so I went with them. The chained tags donāt offend me unless I have to work with them. :grumble: :grumble:
Continuing with the inline-blocks on separate lines, it should be apparent to the novice that it is possible to eliminate white space nodes without using chained tags. If he is interested, we can talk about it.
To answer your quetion, I donāt know. I wouldnāt. But I would take advantage if the anonymous collapsing white space nodes if inline blocks were the display choice. They work fine and last a long time. In this thread they serve as an acceptable contrast to the chained inline-blocks, if Igor is paying attention.
Me too
And I would avoid the IDs that he used and not assign a background color to the <html> element.
2 Likes
Absolutely, that was the main reason behind the method.
Back when I wrote the code in 2010ā it was part of a cross browser method that would display the same in IE- 6,7,&8 and all other current versions of modern browsers at that time.
We didnāt have full support for display:table yet due to IE6,7 still needing support. It was IE- 6&7ās behavior of inline-blocks that inspired the removal of the white-space nodes.
When they were in āhaslayoutā mode they would ignore the white-space even with line breaks between them, they would act like floats. Their behavior is really what I wanted out of all other browsers since we needed a way to center widthless nav elements in horizontal menus.
Everything was working fine with negative values on word-spacing in IE8 and Firefox. It was Chrome & Safari that became the problem with the webkitās broken negative word-spacing modal. The magic bullet was display:table on the parent to bring them in tune with all other browsers.
Before that we fought with all the font-size:0 tricks and tag chaining to try and kill the nodes. Things are different now with old IE dead and gone. But itās good to know all the different ways that the white-space can be dealt with.
My comments from post#4 were just my personal observations of the methods, thatās all.
3 Likes
I played with some of the examples above and also tried to create my own. It doesnāt use 3 divās. I created 2 divs and inside I placed my menu items. Is there better way to place each menu item at the ends of its container beside using floats.
Hi Stribor45,
I think I would use flex for your menu items, it has the built in behavior for wrapping and spacing that you are probably looking for.
Something like this might get you startedā¦
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<meta name="description" content="The HTML">
<meta name="author" content="Me Testing">
<link rel="stylesheet" href="css/yournewstyle.css">
<link href="https://fonts.googleapis.com/css?family=Mouse+Memoirs" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<style>
html {
box-sizing: border-box;
}
body {
background: #0A1827;
}
*, *:before, *:after {
box-sizing: inherit;
}
.wrapper {
max-width: 1350px;
margin: 0 auto;
border: 5px solid #FFFFFF;
}
.main, header, footer {
display: table; /*block formatting*/
width: 100%;
}
header {
}
h1 {
border: 1px solid yellow;
font-family:'Pacifico', Arial, Verdana, sans-serif;
font-size: 2.2em;
color: #FFFFFF;
text-align: center;
}
.menu {
display:flex;
flex-flow: row wrap;
justify-content: space-around;
list-style: none;
margin: 0;
padding: 0;
background: #8A888B;
}
.menu li {
flex:1 1 25%;
min-width:180px; /*force wrapping*/
}
.menu li a {
display:block;
padding:.25em 1em;
text-align:center;
color: #FFFFFF;
text-decoration: none;
border: solid 1px white;
font-family: 'Mouse Memoirs', Arial, Verdana, sans-serif;
font-size: 2.2em;
}
.menu li a:hover {
background-color:#F3A346;
text-decoration:none;
}
/*---- Main Content & Footer ---*/
.main {
padding:10px;
background: #EEE;
}
footer {
padding:10px;
color:#fff;
text-align:center;
font-weight:700;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>Igor Site</h1>
</header>
<nav>
<ul class="menu">
<li><a href="">Result</a></li>
<li><a href="">Search</a></li>
<li><a href="">Submit</a></li>
<li><a href="">Listing</a></li>
</ul>
</nav>
<div class="main">
<h2>Content Heading</h2>
</div>
<footer>
Footer Stuff
</footer>
</div>
</body>
</html>
1 Like
OK lets clarify something hereā¦
When you declare something as inline block is treated as an odd hybrid of both an inline element and block element.
On one hand you gain( or retain) the ability to declare width. But it also get displayed with the same flow as an inline element. That means WHITE SPACE also factors in ( not just box-sizing, padding, and border).
Along ronpatās answerā¦ you could also consider giving a parent element display:flex; with is the modern way of accomplishing what you seem to be after.
hope that helps
2 Likes
For this sort of nav the best options are probably display-table/cell (if you donāt need wrapping) or as mentioned already flex (if you do want wrapping) then use inline-block as a fall-back for non-flex browsers (though they are getting old enough not to care so much).
Both these will take care of distributing the space nicely for each item without concerns over white-space or box sizing.
2 Likes
ok so this is what I have done so far regarding menusā¦
Hi,
I see what your really wanting to do with your nav/menu alignment now. Two in the center and others to left and right.
Just got through wrestling with flex and I donāt see how to do that sort of spacing on the main axis. If there was a justify-self property, like the align-self property for the cross axis, it could be done. No such animal though.
<aside>
The <menu> element was deprecated but is now back in html 5.1 specs. It is used for context menus and interactive items, so it really doesnāt fit in with your nav menu.
</aside>
The html structure your using to get that effect may seem like itās necessaryā¦
<div class="container">
<div class="col1">
<menu>
<li><a href="">Result</a></li>
<li><a href="">Search</a></li>
</menu>
</div>
<div class="col2">
<menu>
<li><a href="">Submit</a></li>
<li><a href="">Listing</a></li>
</menu>
</div>
</div> <!-- container -->
But the job can get done using the following html ( <nav> is just thrown in for accessibility benefits from itās default ARIA role )
<nav>
<ul class="menu">
<li><a href="#">Result</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Listing</a></li>
</ul>
</nav>
With that html you can use Multi-columns to get 2 divisions without using extra divs and breaking your list apart. Then style accordingly and you can get the same effect. They were really designed for columns of flowing text similar to newspapers, but they are not confined to that purpose.
Just looked at your codepen again, itād probably be a good idea to slow down on the IDsā in the page. There is a recent discussion on it here. The excessive ID subject begins around post # 36.
Back to your page, Hereās how the multi-columns worked out for meā¦
columns-menu.html (2.8 KB)
The floats are being contained by the block formatting context the multi-columns create.
multicol containers (elements where column-count or column-width is not auto,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Columns Menu</title>
<meta name="description" content="The HTML">
<meta name="author" content="Me Testing">
<link rel="stylesheet" href="css/yournewstyle.css">
<link href="https://fonts.googleapis.com/css?family=Mouse+Memoirs" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<style>
html {
box-sizing: border-box;
}
body {
background: #0A1827;
}
*, *:before, *:after {
box-sizing: inherit;
}
.wrapper {
max-width: 1350px;
margin: 0 auto;
border: 5px solid #FFFFFF;
}
.main, header, footer {
display: table; /*block formatting*/
width: 100%;
}
header {
}
h1 {
/*border: 1px solid yellow;*/
font-family:'Pacifico', Arial, Verdana, sans-serif;
font-size: 2.2em;
color: #F25E38;
text-align: center;
}
.menu {
columns: 2; /*create 2 columns without extra divs + contain floats*/
column-gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
width: 36%; /*percentage of each column's width*/
outline: 1px solid red; /*for visual testing*/
}
.menu li:nth-child(2n) {
float: right; /*float even numbers right*/
}
.menu li a {
display: block;
/*padding:0 20px; /* use text-align and remove padding for greater shrinking space*/
text-align: center;
color:#FFFFFF;
text-decoration:none;
font-family:'Mouse Memoirs', Arial, Verdana, sans-serif;
font-size: 2.2em;
line-height: 1.4; /*extra room for descenders (like a 'g') with custom font*/
}
.menu li a:hover {
color:#F3A346;
}
/*brought this down to 800px for desktops*/
@media screen and (max-width:800px) {
.menu li, .menu li:nth-child(2n) {
display: block;
width:auto;
float: none;
}
}
@media screen and (max-width:500px) {
.menu {
columns: 1;
}
.menu li a {
padding:0 20px;
}
}
/* iPhone */
@media screen and (max-width:375px) {
selector {
property:value;
}
}
/*---- Main Content & Footer ---*/
.main {
height:200px; /*same as min-height with display-table*/
padding:10px;
background: #EEE;
}
footer {
padding:10px;
color:#fff;
text-align:center;
font-weight:700;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>Columns Menu</h1>
</header>
<nav>
<ul class="menu">
<li><a href="#">Result</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Listing</a></li>
</ul>
</nav>
<div class="main">
<h2>Content Heading</h2>
</div>
<footer>
Footer Stuff
</footer>
</div>
</body>
</html>
Yes, there is not enough space according to your given width, however to distribute equal width you can use bootstrapās ācol-md-4ā class, it will automatically distribute the width.
HI Ray flex can do this easily with auto margins.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.menu {
margin:0 auto;
padding:0;
list-style:none;
display:flex;
max-width:980px;
justify-content:center;
background:#f9f9f9;
padding:10px;
}
.menu li {margin:0 10px;}
.menu li:first-child {margin-right:auto}
.menu li:last-child {margin-left:auto}
</style>
</head>
<body>
<nav>
<ul class="menu">
<li><a href="#">Result</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Listing</a></li>
</ul>
</nav>
</body>
</html>
Not sure if this is what you mean though?
2 Likes
May I ask why the spacing of the menu items is unequal at ādesktopā width? Is this intentional or a side effect of your experiments? (Itās not a problem, just unusual, so I ask.) We would like to be working toward a planned goal, if one exists
Hi Ronpat,
I donāt have specific spacing requirement. As long as everything adjusts nicely as the size of screen shrinks.
Yes, thatās what I meant.
Iāve used the auto margins on the main axis when I was in flex-direction:column; before.
(EDIT: I meant flex-direction:column)
Margins seems to be one of those properties you have to remember that is available to use. You seldom see it in the list of flexbox properties.
Two blocks in center and others left and right was what I kept seeing Stribor45 trying to accomplish with the extra divs.
Just trying to get the same effect without additional markup.
Yes a lot of people donāt understand you can use auto margins on block elements also. See number 1 example here.
3 Likes
SamA74 is right - you didnt allow for the extra space you added by having the ipx border on each div
try this
#one, #two, #three{
border: 1px solid white;
display: inline-block;
width: 32%;
}
named each div and each one is 1px smaller to fit into a 100% parent div
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.