I have a code where #page_field is parent and have two children. So, I want these two blocks go one after another. What I faced is that chrome display left_block correctly: pager_separator_design is 30px wide, so 30px + 120px (relative left) give me 150px and this is what should be done.
However IE, do not add width of pager_separator_design so total left 120 is wrong. Firefox do like Chrome.
What can I do?
HTML
<div id="page_field">
<div id="pager_separator_design">
</div>
<div id="left_block">
</div>
</div>
CSS
#page_field
{
margin-right: auto;
margin-left:0px;
width: 1000px;
background-color: #FFFFFF;
height:auto;
display: table;
}
#pager_separator_design
{
position:relative;
display: inline-block;
left: 120px;
background-image: url('separator_new.png');
width:30px;
height: 100%;
z-index:10;
}
#left_block
{
vertical-align: top;
position:relative;
left:120px;
display: inline-block;
width:850px;
margin:0;
padding:0;
}
I am using IE10.
Display inline-block has a margin issue when trying to align elements horizontally. I think it's about 6px that shouldn't be there (usually in IE).
Try adding margin: 0 0 0 -6px to your elements to see if that solves the issue.
Caveat: Not sure if I fully understood the issue, so this is a bit of a guess.
Hopefully, today, I found a solution and the problem:
I used table, table-row and table-cell. + added addtional emply cell at the left.
And problem was that I made IE show sites like IE 7. I did it many weeks ago and forget to tur n it off.
My css:
#page_field
{
margin: 0px;
padding:0px;
margin-left:0px;
width: 1000px;
background-color: #FFFFFF;
display: table;
position:relative;
}
#middle
{
display:table-row;
}
#left_block
{
width:120px;
display: table-cell;
margin:0;
padding:0;
}
#pager_separator_design
{
position:relative;
display: table-cell;
background-image: url('separator_new.png');
background-repeat:repeat-y;
width:30px;
height: 100%;
z-index:10;
margin:0;
padding:0;
}
#right_block
{
vertical-align: top;
position:relative;
display: table-cell;
width:850px;
margin:0;
padding:0;
}
And code is:
<div id="page_field">
<div class="middle">
<div id="left_block">
</div>
<div id="pager_separator_design">
</div>
<div id="right_block">
</div>
</div>
</div>
I hope it will help somebody.
Related
I'm struggling to understand divs.
I want to have the 'nav' panel expand vertically as required. The second issue I have is that I can't seem to get padding to work. Any changes I make tend to end up with the 'section' div drop below the 'nav' div.
Please see below jsfiddle and code.
Thanks in advance.
https://jsfiddle.net/s59cwy9s/
<div id="container">
<div id="nav">
test
</div>
<div id="section">
test
<br><br><br><br>
test
<br><br><br><br>
test
</div>
</div>
#container
{
width: 1156px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 5px 10px rgb(0,0,0);
position: relative;
background-color: transparent;
height: auto;
}
#header
{
background-color:black;
color:white;
text-align: center;
padding:5px;
}
#nav
{
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
float:left;
padding: 15px;
display: inline-block;
height: auto;
}
#section
{
/*float: none;*/
padding: 10px;
display: block;
/*position: absolute;*/
/*overflow: auto;*/
background-color: white;
width: auto;
height: auto;
}
This may be due to the fact that your name bar doesn't span the height of the webpage completely. Try something like height :100% for the navbar. It might do the trick.
Here is some help :
https://jsfiddle.net/6ubhyL5k/
Some advices :
Take time to really understand how the page flow works (float : left/right) so you will then understand how padding and margin work when you have floating div
Use what you really know and don't improvise :)
Don't use br to make spaces between blocks (margin and padding are what you should use)
Take a look at how bootstrap works and never forget the responsive design
First I will recommend is using box-sizing attribute
It contains any type of padding or borders within the container's width and height. Find more about it Here. So i suggest:
*
{
box-sizing:border-box;
/* Use browser prefixes if u want support for other browsers */
}
Second is add a class to the container which contains elements wit float css attribute like clearfix and add this code:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
or you can just create a div after the container containing elements with float css attribute and clear it.
<div class='clear'></div>
.class
{
clear:both;
}
Using float as much as it is useful brings about a problem in layout if not properly used. https://css-tricks.com/all-about-floats/
My Solution:
html,body {height:auto; width:100%; background:red; }
* { box-sizing:border-box; margin:0; padding:0; display:block; position:relative; }
#container
{
min-width:800px;
height:auto;
margin:0 auto;
width:100%;
}
#nav
{
float:left;
width:30%;
padding: 15px;
line-height:30px;
background-color:#eeeeee;
min-height: 100px;
min-width: 80px;
background:white;
}
#section
{
float:left;
width:70%;
padding:0 100px;
background:yellow;
}
.clearfix:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Hope It Helps You. Though i recommend researching more on layouts since there's other layout which will give you less problem than floats.
Try
#section{
clear:both;
}
JSfiddle
clear:both allows floated divs to stop continuing on the same line with the other floated ones, and drop below.
Update: https://jsfiddle.net/s59cwy9s/2/
You could fix your issue by giving a margin-right to the #nav
So I'm just a begginer to this HTML and CSS stuff, and I tried to make my own webpage. The thing is, it looks like this:
While I would like to get the second div(#diary) centered, but I can't do it without screwing up the whole webpage. Which will be the correct code?
This is what I have:
HTML:
<div id="progress">
Blablabla
</div>
<div id="diary">
blablabla
</div>
CSS:
div {
border: 7px solid #142538;
background-color: #c7d0e1;
}
#diary {
margin:auto;
width:30em;
display:inline-block;
}
#progress {
font-size:16px;
width:auto;
float:left;
display:inline-block;
margin-left:25px;
}
Thanks in advance ^^
You have mixed display: inline-block and float:left which makes no sense. Elements that float become display: block; by default. http://www.w3.org/TR/CSS2/visuren.html#float-position
There are two ways to solve your problem.
Way1 Go Inline-block all the way:
http://jsfiddle.net/fDx2U/
div {
border: 7px solid #142538;
background-color: #c7d0e1;
}
#diary {
margin:auto;
width:30em;
display:inline-block;
vertical-align: top;
}
#progress {
font-size:16px;
width:auto;
vertical-align: top;
display:inline-block;
margin-left:25px;
}
How to the rid of the margin between the items: How to remove the space between inline-block elements?
Vital for this solution is the vertical-align:top; (your initial problem)
Way2 Go floating all the way:
http://jsfiddle.net/fDx2U/1/
div {
border: 7px solid #142538;
background-color: #c7d0e1;
}
#diary {
margin-left: 100px;
}
#progress {
font-size:16px;
width:auto;
float:left;
margin-left:25px;
width: 100px;
}
Vital for this solution is that the width of .diary equals the margin-left of #progress
Try this
#diary {
margin:0 auto;
width:30em;
display:block;
}
can someone please tell me what I am doing wrong here. I've tried to write the clear:both; also inside the floated elements but nothing seems to work.
I would like those small orange boxes inside the green border and not like this (see image).
Fiddle here and code:
<style type="text/css">
.wrap {
border:solid 2px green;
}
.wrap div {
margin: 0 0 0 10px;
padding: 10px;
text-align: center;
width: 67px;
float:left;
}
.wrap div span {
display:block;
background-color:orange;
margin:2px;
}
.clear {
clear:both;
}
</style>
<div class="wrap">
<div>
<span>xx</span>
<span>xx</span>
<span>xx</span>
</div>
<div>
<span>yy</span>
<span>yy</span>
<span>yy</span>
</div>
<div>
<span>zz</span>
<span>zz</span>
<span>zz</span>
</div>
<div class="clear"></div>
</div>
add
display: inline-block;
to your wrap container css
Fiddle: http://jsfiddle.net/Pv6m2/1/
Updated Fiddle
You're floating the <div class="clear">. That's why it does not work.
Try this selector for the floating divs instead so it does not match the clearing div:
.wrap div:not(.clear) {
margin: 0 0 0 10px;
padding: 10px;
text-align: center;
width: 67px;
float:left;
}
Another way of solving this, is to add float: none to your clearing class:
.clear {
clear: both;
float: none !important;
}
It is happening because .wrap does not have any height.
Add
overflow:hidden;
to .wrap. It will give height to it.
Updated fiddle here.
Add float:left; on the .wrap div
Demo
.wrap {
border:solid 2px green;
overflow:hidden;
}
This should be in your css.
Alternatively use
.wrap {
border: solid 2px green;
overflow: hidden;
}
and remove the <div class="clear"></div>
All of the other answers are perfectly fine too. Enjoy learning about floats!
I'd like to ask this question again as its previous incarnation was half a decade ago. We need not consider anything pre-IE9 for the purposes of this discussion:
I am trying to float two divs with different font-sizes. I can't find a way to align the text on the same baseline. Here is what I have been trying:
<div id="header">
<div id="left" style="float:left; font-size:40px;">BIG</div>
<div id="right" style="float:left;">SMALL</div>
</div>
I am struggling with this currently and the best solution I've found is magic offsets from inspection, and that's hardly robust. Inline-block has its own issues I'd prefer to avoid.
Edit:
http://jsfiddle.net/crw4r/10/
As you can see, floats align at the top, not at the baseline.
You could use display: table-cell instead of floats?
#header {
display: table;
width: 100%;
}
#header div {
display: table-cell;
}
#left {
font-size: 40px;
}
#right {
text-align: right;
}
Demo
Set the line-height to be the same on both.
http://jsfiddle.net/crw4r/6/
eg.
line-height: 42px;
or if this is not what you want...
you could use absolute positioning.
http://jsfiddle.net/crw4r/7/
or, you could set the line height on both and add margin to the top of the smaller one, so the sum of the line-height and top margin are the same on both text.
http://jsfiddle.net/crw4r/13/
With display: inline-block, the divs are automatically aligned on the baseline. To compensate for the float, you can use text-align
#left {
display: inline-block;
width: 50%;
font-size: 40px;
text-align: left;
}
#right {
display: inline-block;
width: 50%;
text-align: right;
}
See JSFiddle
If you need to account for white space, use width: 49% for one of the divs
JSFiddle
<div id="container">
<div class="left"><span>Big</span></div>
<div class="right"><span>Small</span></div>
</div>
#container{
width:100%;
margin:0px auto;
}
#container div{
position:relative;
height: 42px;
width: 100px;
}
#container div span{
position:absolute;
bottom:0;
right:0;
}
.left{
float:left !important; font-size:40px;
}
.right{
float:right !important;
}
Try below css and html
CSS
.header {
overflow: hidden;
width: 200px;
display:table;
}
.header > div{
display:table-row;
}
.header > div > div{
display:table-cell;
vertical-align:baseline;
width:50%;
}
.big {
text-decoration: underline;
font-size: 40px;
}
.small {
text-decoration: underline;
font-size: 12px;
}
HTML
<div class="header">
<div>
<div class="big">BIG</div>
<div class="small">SMALL</div>
</div>
</div>
I have a two divs aligned side to side and they work as I want them on desktop but when it comes to mobile browser (it works on chrome mobile as the desktop one) like Mozilla Firefox, Safari one of the divs push to the bottom. I have tried setting overflow:scroll to the div container but that doesn't solve the prob. Can someone help me out?
css
.container{
margin: 10px auto 20px auto;
display:table;
overflow:scroll;
}
.left_col{
width: 700px;
border:1px solid #C0C0C0;
display: -moz-inline-stack;
display: inline-block;
background-color:#fff;
vertical-align:top;
zoom: 1;
*display: inline;
}
.right_col{
width:300px;
border:1px solid #C0C0C0;
display: -moz-inline-stack;
display: inline-block;
height:1090px;
background-color:#fff;
vertical-align:top;
zoom: 1;
*display: inline;
}
html
<div class="container">
<div class=left_col"></div>
<div class="right_col"></div>
</div>
Your viewport isn't sufficiently wide on a mobile browser to fix 1000px of content. Consider using percentage widths if you want to maintain that layout.
.left_col{
width: 70%;
float:left;
}
.right_col{
width:30%;
float:left;
}
My solution will be to move set a width on the parent if possible.
.container{
...
width:1024px;
}
.left_col{
width: 700px;
float:left;
}
.right_col{
width:300px;
float:left;
}