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!
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
Ok, I know this question has been here at least hundred of times but this positioning is driving me crazy - can someone help me?
I have a portlet page (its basically html) with a table and a div tag. I would like to position them next to each other (table on the left, div on the right). Here are parts of my html:
<div id="page>
<table id="logtable">
...
</table>
<div id="divMessage>
...
</div>
</div>
...and CSS:
#page {
width: 1200px;
margin: 0px auto -1px auto;
padding: 15px;
}
#logtable {
width: 800px;
float: left;
}
#divMessage {
width: 350px;
position:relative;
right:-5px;
top: -20px;
}
I have tried various positions - absolute, fixed, float etc, but I cant seem to get it right... Thanks for any help!
You could use...
float: left;
on your div 'logtable'
I would advise using DIVs to do you alignment of content so wrap the table in a DIV.
I also prefer to use inline-block over float left and gives more predictable results.
so...
<div id="page">
<div id="divTable" class="InsideContent">
<table id="logtable">
Left
</table>
</div>
<div id="divMessage" class="InsideContent">
Right
</div>
</div>
#page {
width: 1200px;
margin: 0px auto -1px auto;
padding: 15px;
}
.InsideContent{
display:inline-block;
}
}
#divTable {
width: 800px;
}
#divMessage {
width: 350px;
}
Code needs tidying up but you get the idea...
JSFiddle http://jsfiddle.net/3N53d/
Use float:left on the element which should be on the left and float:right on the right one. Keep in mind that if the sum of their widths exceeds the available space in the parent element they will be split into two lines anyway.
Here you go , no need of right:-5px;
#divMessage {
width: 350px;
position: relative;
top: -20px;
float: left;
}
I see that you forgot closing the quotes at <div id="page>, this might cause some problems, but basically you have to use:
float: left;
for the last div.
I have created this JSFiddle for you to see if this fits your needs.
You can just use display: inline-* to put them side by side in a row
#logtable {
width: 800px;
display: inline-table;
}
#divMessage {
width: 350px;
display: inline-block;
}
JSFiddle
Just try this.
Fiddle
CSS
#logtable {
width: 500px;
float: left;
background:red;
}
#divMessage {
width: 350px;
position:relative;
float:left;
background:blue;
}
try this:
<table id="logtable">
<tr>
<td>
table area
</td>
</tr>
</table>
<div id="divMessage">
div area
</div>
</div>
#page {
width: 800px;
margin: 0px auto -1px auto;
padding: 15px;
border:red solid 1px;
height:170px;
}
#logtable {
width: 400px;
height:150px;
float: left;
border: blue dashed 1px;
}
#divMessage {
width: 350px;
height:150px;
right:-5px;
top: -20px;
border: green dashed 1px;
float:right;
}
here is a smaple
In simple we can do like this:
table#logtable, div.divMessage{
display:inline-block;
}
Or
table#logtable, div.divMessage{
float:left;
width:50%;
}
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 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.
Here's the problem. I got simple html template:
<div class="wrapper"><div class="inside">
<div class="left"><p>Lorem ipsum...</p></div>
<aside><p>Lorem ipsum...</p></aside>
<div class="left"><p>Lorem ipsum...</p></div>
<aside><p>Lorem ipsum...</p></aside>
<div class="left"><p>Lorem ipsum...</p></div>
<aside><p>Lorem ipsum...</p></aside>
</div></div>
And simple CSS:
div.wrapper {width:1020px;margin:0 auto;}
div.wrapper .inside {padding: 10px;}
div.left {width:700px;background:#EEE;float:left;border-top:1px solid #000; clear: left;}
aside {width:300px;background:#CCC;float:right;border-top:1px solid #000; clear: right;}
I want all divs to be on the left side of the page, one after another, without any spacing and all asides on the righ side. And there it is. No matter how high the content of asides is the divs are working fine. But if the content of any div is too hight I'm getting empty space between asides, like there was something like clear:both along with this div.
Example:
I want it to always look like this, no empty spaces whatsoever:
I cannot change html (divs&asides order), I can change only CSS. I can use html5 and css3.
http://jsfiddle.net/HRp2H/
You could add a CSS gradient to simulate full columns:
http://jsfiddle.net/HRp2H/5
div.wrapper {
width:400px;
margin:0 auto;
padding: 10px;
}
div.wrapper .inside {
background: -moz-linear-gradient(left, #eee 250px, #ccc 250px);
overflow: auto;
}
div.left {
width:250px;
float:left;
border-top:1px solid #000;
clear: left;
}
aside {
width:150px;
float:right;
border-top:1px solid #000;
clear: right;
}
Here I've moved the padding that you had on .inside to its child elements: http://jsfiddle.net/HRp2H/3
UPDATE: Here's how you might do it using jQuery. I'd use my earlier answer as a fallback.
http://jsfiddle.net/HRp2H/7/
.leftCol, .rightCol {float: left;}
.leftCol .left, .rightCol aside {display: block}
div.left {
display: none;
...
}
aside {
display: none;
..
}
var myLefts = $('.inside').clone().find('aside').remove().end().html();
var myAsides = $('.inside').clone().find('.left').remove().end().html();
$('.wrapper .inside').html('');
$('.wrapper .inside').append('<div class="leftCol" />');
$('.wrapper .leftCol').append(myLefts);
$('.wrapper .inside').append('<div class="rightCol" />');
$('.wrapper .rightCol').append(myAsides);
Check this fiddle out:
http://jsfiddle.net/HRp2H/4/
It utilises a css hack to make floating columns the same height:
margin-bottom: -500px;
padding-bottom: 500px;
overflow: hidden;
and then
overflow: hidden;
on the main div
Try using JQuery masonry. It can stack all of your DIV blocks neatly on top of each other