float vs. inline-block changes margin and parent height - html

So I have been trying to wrap my mind around this and cant figure it out why.
Note: Margin and padding is 0.
The 1st example is
<div> <!-- Gray Box -->
<div> <!-- Purple Box -->
</div>
</div>
I have two images - One is float, the other is inline-block.
The height of the div is shown by the gray color.
float: left;
display: inline-block;
The 2nd example is
<div>
<ul>
<a href = "#">
<li>
<img src = "...">
</li>
</a>
</ul>
</div>
Again, left and inline-block do different things
float: left;
display: inline-block;
Bottom Line
Any suggestions beside the question is welcome.
I don't know why margin / padding is changing and why div size matters by float and display. Thanks

There are 2 problems here.
1) Like someone mentioned in the comments, inline block takes space into account, meaning on the parent div you should have:
font-size:0;
2) Floating takes the element out of the document flow, meaning the parent will expand only past the last non floated child element. To fix this you should put a clearfix class in your css and add it to the parent of the floated element(s).
.clearfix::after{
content:'';
display:block;
clear:both;
}
So once you've done this your first example should look like this:
<div class="clearfix"> <!-- Gray Box -->
<div style="float:left"> <!-- Purple Box -->
</div>
</div>
Now the gray box should expand past the purple box;
As a matter of consistency i don't think you should mix inline-block with floating. One, it won't work on the same element and 2, they are designed for different things.

Related

How do I prevent one DIV from sitting on top of another DIV?

I’m having trouble getting one div not to lie on top of another div. I have the following
<div id="navbar">
<div id="leftNavSection"></div>
<div id="rightNavSection">Logged in as Dave <a rel="nofollow" data-method="delete" href="/logout">Log Out</a></div>
</div>
with the accompanying CSS …
#rightNavSection {
float: right;
}
However, when I add this div underneath, it lines up on the same vertical plane as the nav div.
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
</div>
Here is the JSFiddle that illustrates the problem — https://jsfiddle.net/z4rw9qj1/ . If I add a fixed height to the nav div (e.g. “height: 10px;”), then the overlay doesn’t happen, but I don’t want to add a fixed height because if someone adjusts their browser font size, or I add other elements, then the look is broken. Is there a way I can get the lower div not to trample the upper div?
That's because of float: right and you can fix that if you add overflow: hidden on header DEMO
header {
overflow: hidden;
}
Have you tried the z-index property ? It is a property that decides what order are the elements aligned in the "front-back" axis.
http://www.w3schools.com/cssref/pr_pos_z-index.asp

css: display:inline-block and span with position:relative to build multi-column dropdown

I try to created multicolumn menu here (updated link is HERE):
I made used of display: inline-block strategy to make (horizontal) rows. And seems it works.
But it stops work when I wrapped it into the span which comes with position:relative.
<section>
<button>123</button>
<button>123</button>
<span class="dropdown">
* <!-- this is a link that should be inline with buttons -->
<div class="menu">
<div class="row">
<ul>
<li>11111111111111111111111111</li>
<li>1111111111111</li>
<li>111</li>
</ul>
</div>
<div class="row">
<ul>
<li>2222222222</li>
<li>222222222222222222222</li>
</ul>
</div>
<div class="row">
<ul>
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</div>
</div>
</span>
</section>
The href link in the span represents a button or link where I would click to make menu appeared.
I have to have position relative in the span to make menu appears on right place, relatively to it.
(all buttons and link should be on the same horizontal line)
Question: how to make it working?
It works though if I change span to div and make fixed size for it like width:600px (and this width have be more or less of the menu width to make it work like expected, which is weird), but/so I want it to be span (with no specific/hard-coded width).
UPDATE:
I've updated my example to show how it works with span as block and buttons: http://jsfiddle.net/uz0do787/32/
Just put a little more detail that was not shown on previous demo, to show what I want.
I want all buttons and the href link be on the same line, but making span "display:block" breaks that order.
Simply add display:block to span
see DEMO
See why you need to add display:block
The HTML <span> element is a generic inline container for phrasing
content, which does not inherently represent anything. It can be used
to group elements for styling purposes (using the class or id
attributes), or because they share attribute values, such as lang. It
should be used only when no other semantic element is appropriate.
<span> is very much like a element, but <div> is a block-level
element whereas a <span> is an inline element.
Source:Mozilla Developer Network
Do you mean something like this?: Fiddle
.dropdown {
position:relative;
display: block;
padding: 10px;
}
a {
position:absolute;
top: -15px;
left: 100px;
}
Span - this is an inline element. You can't wrap block with inline element. To make it work with span, add "display: block;" property to the .dropdown
Like:
.dropdown {
position:relative;
display: block;
}
I guess If fixed it by switching to display:table then I can stay with span not trying to make it block and it does not jump then to the next line:
Before:
http://jsfiddle.net/uz0do787/32/
After
http://jsfiddle.net/uz0do787/34/
But in any case, I think there is a room for re-factoring - the menu should be independent to show itself by js by x,y depending on the span/link location so that the DOM not to be so dependable on each other and not to be so fragile.
And I just do not understand, why when I apply "display:table" (on that solution/answer I proposed) span stays on place with buttons, but with "display:inline-block" the span breaks the menu layout. What makes display:table works like expected comparing to inline-block solution.

How to align Nav Bar right next to div?

This is my website
Does anyone know how to put the nav bar right next to the white box where my content will go? I just want it exactly vertically aligned with the white box, but make it sit just to the left of it. Thanks
HTML
<nav>
<div class="nav-container">
<ul class="nav">
<li><span class="text">HOME</span></li>
<li><span class="text">HTML & CSS</span></li>
<li><span class="text">USABILITY</span></li>
<li><span class="text">ACCESSIBILITY</span></li>
<li><a href="page5.html"><span class="text">HOW I BUILT THIS</span>
</a>
</li>
</ul>
</div>
</nav>
CSS
nav {
margin: auto;
}
EDIT: I misunderstood the question, here is the new answer:
http://codepen.io/Vall3y/pen/gbpRoG
I have put the nav and content again under the same container, but the container is now relatively positioned, and the nav is absolutely positioned at top: 0, left: 0. You can control the distance of the nav from the content by adjusting the container width, or with the left attribute of the nav. I have applied a dashed border around the container to demonstrate what is happening, but in your site it doesn't need a border of course.
Orig:
If you could include the rest of the code I could give you a better example, but here is the layout you want:
http://codepen.io/anon/pen/EajXgq
The key here is that the nav and content are adjacent in markup (elements comes right after another. I used float left to make them on the same vertical line but there are other techniques)
The nav is floated left, so that it doesnt take any flow space and allows the content to horizontally align at the center, using a fixed width and an auto margin.
They both are contained in a container to allow margin from the logo if necessary
Also see that there is a clearfix element, for clearfix. Google it to find out what it does but basically it allows the container to stretch over the floated elements so it doesn't mess up the layout
<div class="purple-logo"></div>
<div class="container">
<div class="nav"></div>
<div class="content"></div>
<div class="clearfix"></div>
</div>

Why is there a gap between image and navigation bar

Hi I'm having some trouble removing a small gap between an image and my navigation bar. I've honestly tried just about everything i can think of. Setting inline-blocks on my ul and li level, and using text-align: left don't seem to be moving the hyperlinks to the left-most side of the div, and from there I'm not to sure what should be done. There is a padding, but it shouldn't be causing that much of a gap.
Here is the html code:
<div id = "header">
<img src ="img.png"/>
<div id ="nav_bar">
<ul class="nav">
<li class= "nav">Home</li>
<li class= "nav">Our Products</li>
<li class= "nav">Categories</li>
<li class= "nav">About Us</li>
<li class= "nav">Contact Us</li>
</ul>
</div>
</div>
Here's a jfiddle describing what I'm talking about.
http://jsfiddle.net/37VZb/1/
To clarify the gap I'm talking about is between the right of the image and the left most nav bar element.
That's because of a space character between inline(-block) elements. This could be fixed by commenting that space out this way:
<img src ="http://www.leapcms.com/images/100pixels1.gif"/><!--
--><div id ="nav_bar"> ...
JSFiddle Demo.
Similar topic on SO:
How to remove the space between inline-block elements?
And a good reference:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Update
The remaining space belongs to the user agent applied style on the <ul> element.
Web browsers usually apply some padding on the list elements. To remove that set padding: 0; as follows:
ul.nav { padding : 0; }
Here is the Updated Fiddle.
is this what you mean? You can target the nav class on your ul and adjust the default margins that are being assigned
ul.nav{
margin: 10px 0;
}
JSFIDDLE
Your gap is a white space like you find in between words since both element are set as inline boxes. In your CSS you set as well somme padding to ul and a , they both are there.
http://jsfiddle.net/37VZb/8/
.nav_bar, .nav{
padding:0;
display:inline-block;
}
To get rid of it:
1) do not indent your code and get closing and opening brackets of element touch each other
2) add a CSScomment in between to swallow that white-space
3) set font-size to 0 (0.01px for IE) to parent of these inline-boxes and reset it ot back to 1rem (and or px/pt) for img (alt) and nav_bar
negative margin or negative letter-spacing are not to be used, it is not reliable and not meant to care about this

Can you relativlely or absolutely position items in a display:table-cell?

I have a link that I want to always be at the bottom right of the cell it is in. Right now the link is in a < p > element. I tried doing both absolutely and relative positioning but I can get the effect I am looking for.
I have a row with 4 cells, when attempting to apply the absolute position it takes the element to the very last cell on the right... instead of just placing it within the cell it is in. I tried various methods but not sure if I am sure tired or trying to do the impossible.
I am very new to css tables so I could be thinking about this all wrong.
Here is an example:
http://jsfiddle.net/56H5x/1/
The "Learn more" link to the very right should be at the bottom right of the first cell.
Thanks in advance.
While setting position:absolute on child element <p> set position:relative on parent element <div> having <p> element.
So the child element will be relative to its parent element.
EDITED:
Working JS Fiddle
in Chrome, Safari, Opera and IE
But not compatible in Firefox, because Firefox does not obey position:relative on display:table-cell elements.
See the reference:
Edited: Sorry..!! Missed it :). As said by ahsaan, Add position relative to .layout-cell and modify your HTML as below.
.layout-cell {
display: table-cell;
vertical-align: top;
position: relative;
}
.layout-cell div{
position:absolute;
bottom:0;
right:0;
}
<div class="layout-cell columnBody-wrapper curvedBottom">
<p>Column 3</p>
<div><a class="button button" href="#">Learn More</a></div>
</div>
Expanding on Ahsan Rathod's answer to solve this issue in firefox wrap your content inside a div and set your properties on this div rather than the div set as display table-cell
.cell-div {display:table-cell}
.relative-div {position:relative; width:100%}
.absolute-el {position:absolute}
<div class="cell-div">
<div class="relative-div">
<div class="absolute-el">
<img ... >
</div>
</div>
</div>