This question already has answers here:
How do you keep parents of floated elements from collapsing? [duplicate]
(15 answers)
Closed 8 years ago.
I've created a horizontal navigation menu in HTML using <ul> and inline-block display styling. I'm wanting to set the background colour of the containing <div>, but it isn't working. It's as though the <div> isn't wrapping around the <ul>.
The first <div> is supposed to set the background colour for the entire width of that part of the page. The second <div> then sets the width of the navigation menu within that area, and centres the <div> so that the unused space is evenly distributed either side.
Here's the code:
<div style="background-color: #302683">
<div style="margin: 0 auto; width: 80%">
<ul style="padding: 0; margin: 0">
<li style="display: inline-block; float: left">Design</li>
<li style="display: inline-block; float: left">Proofreading</li>
</ul>
</div>
</div>
Also, how would I centre the <ul> within the second <div>, so that the <li>s appear in the centre?
This should work: <div style="background-color: #302683; overflow: hidden;">
See the example: http://jsfiddle.net/b8q836zs/1/
Overflow: hidden|auto will make an element establish a 'new block
formatting context' — an isolated container, which will keep it from
flowing into the space occupied by preceiding floats — see: CSS 2.1 -
floats.
Related
This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 7 months ago.
<div style="background-color: #666">
<div style="margin: 20px">Some Content - no border</div>
</div>
However, if I add a border, background color is applied to the whole content including child element's margin:
<div style="background-color: #666; border: 1px solid">
<div style="margin: 20px">Some Content - has border</div>
</div>
What's the reason for this behavior? What's the specification explains this?
Since the parent Div is Empty, and the Child should have a distance to the border of the parent element, no background is shown in the margin. If you use Padding or a Border, you extend the area of the Child element to that border.
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 2 years ago.
<div style="background-color: black;width: 100%;height: 300px;margin-bottom: 30px;">
<div style="width: 30%;background-color: green;height: 100%;display:inline-block;">
ddsddsd sd sd sddsa
</div>
<div style="width: 30%;background-color: yellow;height: 100%;display: inline-block;">
</div>
</div>
I have added a small text inside the green inner DIV tag .suddenly it moved to the down.
The same issue happens even when I add another div tags inside that inner div tag.
If I remove that inner text then this green div tag will act normal just like that yellow tag.
I am not understanding why. Why HTML is acting illogically.. I don't think this has any logical reason.. I feel like quitting HTML..
This is because inline-block comes with another handy property called vertical-align and by default, your boxes are not vertically set. So by giving them both vertcial-align: middle will solve your issue.
<div style="background-color: black;width: 100%;height: 300px;">
<div style="width: 30%;background-color: green;height: 100%;display:inline-block; vertical-align:middle;">
ddsddsd sd sd sddsa
</div>
<div style="width: 30%;background-color: yellow;height: 100%;display: inline-block; vertical-align:middle;">
</div>
</div>
Wroking Fiddle
The div tag in HTML by default gives a margin on all 4 sides of the text and you need to normalize the margin using css.
{
margin: 0;
}
Also to make sure there is no padding too you can modify your css code to
{
margin: 0;
padding:0;
}
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
I'm Coding a sign in/sign up website, the css is very basic at this time along with basic js (I plan on polishing css). But I want to get the basic css done before working on html, one element of my website is an h3 element that I want to have a margin that pushes from the bottom of one of the selection divs but the margin is pushing from the top of the body rather than the containing div.
<div id="container">
<div id="leftFloat" class="50%">sign in</div>
<div id="rightFloat" class="50%">sign up</div>
<div id="rightFloat" class="50%">
<h2 id="selection" class="margin: 50px;">Pushes the container down rather than pushing itself down</h2>
</div>
</div>
This is what i want When Using The Margin
This is what i get when using the margin
Use clear:both for h2 as shown below:
h2{
clear: both;
}
This question already has answers here:
My inline-block elements are not lining up properly
(5 answers)
Why are these two inline-blocks not aligned? [duplicate]
(2 answers)
Vertically aligning relative inline block with non-relative inline blocks [duplicate]
(1 answer)
Display inline block text inside issue
(3 answers)
Closed 5 years ago.
My problem is that i'm trying to get three entirely independent columns and with 'display: inline-block', my columns get side by side but starts under the biggest.
HTML, CSS:
.container > div {
display: inline-block;
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
The problem is that the smallest line is aligned to the last line of the biggest div, as follows:
When dealing with inline-level and table cell elements, the vertical-align property applies. The initial value of this property is baseline. That's what you're seeing. The text in each box is aligned to the baseline. Adjusting the vertical-align property to another value (such as top) solves the problem.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
Found the solution, although i don't think it's the best way to do this:
.container > div {
vertical-align: top;
}
:)
You could add css property vertical-align: top, that way all content will start at the top of the div.
.container > div {
display: inline-block;
vertical-align:top
}
<body>
<div class="container">
<div>
aaaaaaa<br>bbbbbb
</div>
<div>
cccccc<br> ddddddd<br>eeeeeee
</div>
<div id="end">
ffffff
</div>
</div>
</body>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I have an image of 24x24 px inside an <a>, which is nested in a <div> having min-height:50px.
The bottom and top paddings of <a> element are 13px both.
So, height should be 24px(image height) + 13px(<a> padding-top) + 13px(<a> padding-bottom) = 50px right?
The problem is that the wrapper <div> is expanding its height to 54px, except when I define the vertical-align:middle for that image, then It's resized to 50px as desired.
Here is the code http://codepen.io/thyagosic/pen/JKYrjN
Removing the vertical-align: middle; may help to understand the problem
All images are inline elements by default and they have 4px space at the bottom. You should set 'vertical-align:top' or 'display: block' on them to remove this space.
I recommend putting images inside of links into divs (or setting display: block to the element)
<div class="menu">
<a href="#">
<div id="image">
<img src="http://xamlspy.com/Media/Default/Logo/XamlSpy.24x24.white.png" alt="" />
</div>
</a>
</div>
Also padding/margin should be set for "block" elements