Divs on same line


#1

Why is the 3rd div not on the same line?

https://jsfiddle.net/apozvm95/3/


#2

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.


#3

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)


#4

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. :slight_smile:


#5

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 :slight_smile:
And I would avoid the IDs that he used and not assign a background color to the <html> element.

:vulcan:


#6

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. :slight_smile:


#7

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.


#8

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>

#9

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


#10

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.


#11

ok so this is what I have done so far regarding menus..


#12

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>

Divide div (table-cell) further
#13

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.


#14

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?


#15

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 :slight_smile:


#16

Hi Ronpat,
I don't have specific spacing requirement. As long as everything adjusts nicely as the size of screen shrinks.

:slight_smile:


#17

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.


#18

Yes a lot of people don't understand you can use auto margins on block elements also. See number 1 example here.


#19

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


#20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.