So I made four simple divs and I will be changing the property of the header div.
The HTML:
<div class="third">
Lorem Ipsum
</div>
<div class="third">
Lorem Ipsum
</div>
<div class="third">
<div class="header">Lorem Ipsum</div>
</div>
The CSS:
.third {
width:500px;
display:inline-block;
border-right:1px solid black;
height:400px;
}
.header {
margin-left:16%;
font-family:Arial;
font-size:200%;
}
The third div works great but the first two divs are pushed down because of the bigger text. What can I do to prevent this issue?
Adding vertical-align: top will fix your problem.
Fiddle: http://jsfiddle.net/QX7FH/
If you're curious why this works, andyb does a great job explaining why here: Why does this inline-block element have content that is not vertically aligned
You can use floats instead of inline-block, you also gain a little bit of browser support (old ie's):
http://jsfiddle.net/aP9Fu/
.third {
width:500px;
display:block;
border-right:1px solid black;
height:400px;
float: left;
}
Also, I added a container around all those divs in order to clear the floats.
div's are automatically set to be block elements. This means that they will create a line break. If you also put display:inline-block; in your css for your .header, it should prevent it from creating a new line.
Related
I have a webproject using bootstrap.
There is an Layout with two columns. The left column has an image and the right one has an text. The text should be vertically centered to the image.
The first problem was to get the columns the same height.
I found the following working solution:
.col {
margin-bottom: -99999px;
padding-bottom: 99999px;
height:100%;
}
To get the text centered vertically I inserted the following html in the right row:
<div class="table">
<div class="cell">My text</div>
</div>
CSS:
.table {
height:100%;
width:100%;
display:table;
}
.cell {
display:table-cell;
vertical-align:middle;
height:100%;
}
But I don't get the table and its cell to height 100% of the parent. Position absolute not working too, because bottom:0 is 99999px;
Anybody has an idea what I can do? Thanks
I think that if you can do it, try to use flex-box instead of a fixed grid.
Here's your CodePen for an example: http://codepen.io/anon/pen/RaNYLG
HTML:
<div class="row">
<div class="column">
<p> Here you have some content.</p>
</div>
<div class="column">
<p> Here you can have a lot of text as well, but i will make longer since you need to understand how to vertically align your content. In this case you will see that the content being aliged will be the other. Take this just as an example.</p>
</div>
</div>
And CSS:
.row{
display:flex;
}
.column{
display:flex;
width:50%;
align-items:center;
}
(And to learn how to properly use the flex property: http://flexboxfroggy.com/)
I'm having a doubt in the basics of the HTML rendering. I'm having the following HTML/CSS.
http://jsfiddle.net/cgZ4C/2/
<style type="text/css">
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
}
.content
{
float:left;
width:196px;
min-height:20px;
background-color:#BABABA;
margin:2px;
}
</style>
<div class="outer">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div>
Why is the outer div not growing when the inner content grows? Even I tried adding some text inside .content divs. But still the .outer div is not growing?
You need to add overflow property to your outer div and assign proper value to it like
overflow:hidden
Find what is the most suitable for your need here
Here is the possible code change you need:
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
overflow:hidden;
}
CLEAR YOUR FLOATS! Always :-)
Add overflow:auto; like in this code: http://jsfiddle.net/cgZ4C/3/
Many CSS frameworks these days use a class clearfix . That has become the de facto standard. Twitter bootstrap uses it as well. What we need to do is just add a class clearfix to the outer div and you'll be done :)
Although Clearing floats is the correct way to go, sometimes, there is another way you can do this:
float your outer div too!!!
.outer {
float: left;
}
This way, the outer will respect the floated children and expand, but you'll need to float the parent div of outer too, and so on, until there is a ancestor div which is cleared/<body> is encountered.
All floats are like bro's so go along with each other much better than non-floated non-cleared divs.
:)
Add attribute overflow: hidden to the .outer style.
It doesn't grow because all of your content within the parent is floated. When an element is floated, it is no longer taken into consideration by the parent when it calculates it's total size. Since every element is floated, as far as the parent is concerned there is no content, so it doesn't resize.
Your code looks like a table so, with display:table (source) the element will behave like a table element.
http://jsfiddle.net/eWwtp/
.outer
{
background-color:#DADADA;
width:400px;
border:1px solid silver;
margin:auto;
min-height:50px;
padding:10px;
display:table
}
Another solution, that avoid these issues:
But with overflow hidden, more issues can arise where items outside of that div are hidden, or cut off (usually with menus etc).
http://jsfiddle.net/4LqaK/
Add:
<div class="clear"></div>
.clear{clear:both}
jsFiddle
I am trying to get these 4 divs to sit on the same vertical line. Why does the presence of buttons change the position of the first div?
HTML
<div class="box">
<button>Y</button> <button>N</button>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
CSS
.box {
width:200px;
height:200px;
padding:10px;
display:inline-block;
border:1px solid black;
text-align:center;
}
RESULT
Add vertical-align:bottom to the style of your divs.
The cause of your problem is the presence of any content, as it defines the baseline for the div.
Adjusting the css like this works
.box {
width:200px;
height:200px;
padding:10px;
border:1px solid black;
text-align:center;
}
div.box{display:inline;float:left;}
jsFiddle solution
Just change the display property of the div's and they'll align vertically:
display: block
Edit: #ben said he wanted the div's aligned vertically. Vote me down if you must, but it's not my fault if he didn't know the difference between horizontal and vertical.
I'm working on a website that uses two columns inside a container. The container has a white background that should stretch to the bottom of whichever column is highest, so I'm using the holy grail method for that.
However, both columns should positioned so that a part of it exceeds the white background (this example uses a fixed height, which should be fluid). As far as I know, this can only be done by setting the overflow to visible but this break the equal height of the columns.
How do I fix this with as little additional elements as possible?
The easiest fix in this case seems to be adding <br style="clear:both" /> before the closing tag for #container.
You can change it to <br class="clearfix" /> and .clearfix{clear:both} if you wish.
Solution is to use inline-block elements..
Css
.container{
width:300px;
background-color:#ccc;
margin:0 auto;
border:1px solid red;
}
.container > div{
width:150px;
display:inline-block;
vertical-align:top;
}
.inner{
background-color:#666;
margin-top:10px;
width:130px;
}
.left .inner{
margin-left:-10px;
}
.right .inner{
margin-right:-10px;
margin-left:auto;
}
HTML
<div class="container">
<div class="left">
<div class="inner">left 1st inner panel</div>
<div class="inner">left 2nd inner panel</div>
</div><div class="right">
<div class="inner">right 1st inner panel</div>
<div class="inner">right 2nd inner panel with arbitrary text to show the increase in parent elements</div>
</div>
</div>
view demo
I created the following layout:
<div class="title" id="m1">
<div class="chkbx">something</div>
<div class="name">
Dummy #1
</div>
</div>
// .. the div above repeats several times
I'm using the folowing CSS:
div.title { border: 1px black solid; }
div.chkbx {
clear:both;
float:left;
padding:2px;
text-align:right;
width:5%;
}
div.name {
float:left;
width: 50%;
}
and would expect a border around all of class=title, but see only some strange lines at the top. Please let me know what I do wrong.
Many many thanks!
You are probably floating the content. Set overflow: hidden on the container.
http://complexspiral.com/publications/containing-floats/ explains why you get this behaviour
http://www.ejeliot.com/blog/59 lists various ways to avoid it, most of which are better than those described above, and including the overflow approach.
Try adding one more element in .title with clear: both; style.
Your .title elemnt contains only floated elements, and floated elements don't stretch their parent elements, so .title element is rendered as if it were empty.
Here you wrong cause of you missed clear side of DIVs. If you use div with float:left/right, for start new line you must use clear:both with div.
-- JUST ADD ONE DIV WITH CLEAR:BOTH;
<div class="title" id="m1">
<div class="chkbx">something</div>
<div class="name">
Dummy #1
</div>
<div style="clear:both;"></div>
</div>