once it's multiple elements a simple
position:absolute;
bottom:0;
won't help since it will overlay the multiple elements
Here is a fiddle of my atempt : http://jsfiddle.net/7uYUP/
(it's the .interaction elements that I want to float right and bottom, right now they only float right)
I was hoping not having to resort to JS..
The problem is the height different between your green and yellow boxes (10pt vs 40pt). You can adjust for that with margin-top:
.interaction{
height:40pt;
width:100pt;
background-color:yellow;
float:right;
border: 1pt solid blue;
margin-top:-32pt;
}
http://jsfiddle.net/7uYUP/2/
<body>
<div id="container"><div>
<div class="interaction leftalign">
</div>
<div class="interaction">
</div>
</div></div>
</body>
body{
background-color:red;
}
#container{
position:absolute;
height:10pt;
width:100%;
background-color:green;
bottom:0;
}
#container > div {
position:relative;
height:100%;
}
.interaction{
height:40pt;
width:100pt;
background-color:yellow;
float:right;
border: 1pt solid blue;
}
.interaction.leftalign {
float:left;
}
Related
My question is a little different from the following
CSS Float Logic.
My question is about the concept heightmore concret than that.
There are rules here
https://www.w3.org/TR/CSS22/visuren.html#float-rules
point8 A floating box must be placed as high as possible.
Point9 points out that a left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible and a higher position is preferred over one that is further to the left/right.
Now here is my example.
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:right;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box3">box3
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box6">box6
</div>
</div>
</body>
Here is what i got. There are conflicts with point8 and point9 in my example. How to explain the default behaviour of browser to parse the css?
Why can't got the result as below?
There is a confused concepts between me and Quentin Roy at least ,to check the discussion as below, what does A floating box must be placed as high as possible mean?
Especially the word high here?
In the opinion of Quentin Roy, box4 and box5 are equally high for my example.
In my opinion, box4 are highest ,box5 are lowest ,box3 just in the middle of them.
My fore-end experts please show your correct interpretations on my example here ,to end the disccusion.
1 What does high mean in A floating box must be placed as high as possible?
2 Which is the highest and which is the lowst among box3 and box4 and box5?
You answered it yourself:
A floating box must be placed as high as possible
and
a higher position is preferred over one that is further to the
left/right
This is exactly what is happening. The algorithm first try to find the highest free area where your div can fit, then put the div at the rightmost position (in the case of float: right). As a result, box6 is positioned a little bit less on the right so it can be higher.
If it is not what you want, one solution is to use an invisible "spacer" to fill the hole underneath box5.
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:right;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6spacer{
width: 250px;
float:left;
box-sizing: border-box;
border-width: 5px;
border-style: solid;
border-color: lightgray;
color: lightgray;
height: 40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box3">box3
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box6spacer">spacer
</div>
<div class="box6">box6
</div>
</div>
</body>
Another solution is to make use of the fact that a float: left will never go on the right of a float: right and vice-versa. As a result, if you find a way to make box3 floating left instead of right, box6 won't go on his left and thus, will be on top of it.
This is not always possible but in this case, you can have box3 at the same position while floating left (instead of right) if you insert it after box4 and box5:
body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:140px;
height:200px;
background-color: yellow;
float:left;
}
div.box4{
width:250px;
height:300px;
background-color: green;
float:left;
margin-top:-40px;
}
div.box5{
width:250px;
height:200px;
float:left;
background-color: purple;
margin-top:-40px;
}
div.box6{
width:100px;
height:120px;
float:right;
background-color: red;
}
<body>
<div class="box">
<div class="box1">box1
</div>
<div class="box2">box2
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box3">box3
</div>
<div class="box6">box6
</div>
</div>
</body>
How lo align div blocks by the center .
I dont need left and right spaces.
I need clearly code which is align inline element
https://jsfiddle.net/ax7ddqba/
<div class="wrapper">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
</div>
.wrapper{
border:1px solid red;
width:980px;
text-align:center
}
.block{
border:1px solid green;
width:200px;
height:100px;
display:inline-block;
vertical-align:top;
}
I can do like this:
https://jsfiddle.net/yhocvf7p/
.wrapper{
border:1px solid red;
width:980px;
text-align:left
}
.block{
border:1px solid green;
width:240px;
height:100px;
display:inline-block;
vertical-align:top;
margin-right:123px;
}
.block:nth-child(3){
margin-right:0;
}
but it's not what I need.
If I understand your desired result correctly, which is that the blocks stack horizontally, and then appear in the center of the next row when they run out of room, you should be able to achieve this with text-align:center property.
https://jsfiddle.net/y7rtptxr/1/
#wrapper {
border:red 1px solid;
text-align:center;
width:260px;
}
#wrapper .block {
background:green;
border:#000 1px solid;
height:40px;
width:60px;
display:inline-block;
}
If I got you right, you can use font-size: 0; on your container and then you set needed font-size on your children, so you get this.
You need something like this? http://jsfiddle.net/x2pmjkww/
Is there a way to hide the overflow of a div "at the top" rather than "at the bottom"?
This jsFiddle illustrates what I mean. The enclosing div has overflow-y:hidden, but this hides the lower part of its content. I want to hide the upper part of it.
The obligatory source code (verbatim from the jsFiddle):
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
*{margin:0;padding:0;border:0;}
#centered{
margin:20px auto 0;
overflow-y:hidden;
height:150px;
outline:5px solid green;
}
#centered,
#top,
#bottom{width:150px;}
#top {height:120px;background-color:red;}
#bottom{height:150px;background-color:#555;}
#top,#bottom{
color:white;
text-align:center;
padding:0 10px;
}
#top{padding-top:50px;}
#bottom{padding-top:60px;}
<div id="centered">
<div id="top">
this div should be "overflowed away"
<em>at the top!</em>
</div>
<div id="bottom">
this content should show
</div>
</div>
See this FIDDLE, you need to wrap the content in an absolute positioned DIV with bottom set to 0, whilst the parent container is given a position of relative
HTML
<div id="centered">
<div id='content'>
<div id="top">this div should be "overflowed away" <em>at the top!</em>
</div>
<div id="bottom">this content should show</div>
</div>
</div>
CSS
*{
box-sizing:border-box;
margin:0;
padding:0;
}
#centered {
margin:20px auto;
overflow-y:hidden;
height:150px;
border:5px solid green;
width:150px;
position:relative;
}
#content {
bottom:0px;
position:absolute;
}
#top {
min-height:120px;
background-color:red;
padding-top:50px;
}
#bottom {
background-color:#555;
padding:60px 10px 0 0;
}
#top, #bottom {
color:white;
text-align:center;
}
I was working on leftbars for my website but they seem to be a little left shifted. I don't know why this happens. I have attached the code.
HTML
<div id="main_element">
<div id="first-child">
<img/><span id="edit">Edit Picture</span>
</div>
<div id="leftbar" align="center">
<div>Left bar 1</div>
<div>Left bar 2</div>
<div>Left bar 3</div>
</div>
</div>
CSS
#main_element{
width:90%;
position:relative;
border:1px solid teal;
}
#first-child{
position:relative;
height:90%;
width:100%;
}
#edit{
position:absolute;
right:6%;
top:4%;
font-size:1em;
}
#main_element #first-child img{
border:1px solid teal;
height:50%;
width:90%;
margin:5%;
background-color:#ccc;
}
#leftbar{
height:40%;
margin:0 1%;
}
#leftbar div{
border:1px solid;
width:100%;
height:25%;
background:#E0E0E0;
text-align:center;
padding:1% 0;
}
I am attaching a demo too. http://jsbin.com/agahuw/2/edit
It is because you have their width at 100% but you have also added a border to them, this means the actual width is 100% + 2px
If you need to have a border on them, don't give them a width - they should fill their container by default (unless you float them)
Hi how do I get div 'one' and div 'three' auto adjusted to screen side whilst keeping div 'two' width static in css? all three divs should be in the same row
my HTML goes as this;
<html>
<header<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="x">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div><!-- close div 'x' -->
</body>
</html>
and the CSS done so far is as follows;
#x {height:34px; border:1px solid gray;}
#one {height:30px; border:1px solid red;; width:auto; float:left;}
#two {height:30px; border:1px solid green; width:660px; float:left;}
#thr {height:30px; border:1px solid blue; width:auto; float:left;}
any suggestions greatly appreciated. Thanks for looking
You can do it like this My Fiddle
HTML
<div class="container">
<div class="first"></div>
<div class="static"></div>
<div class="third"></div>
</div>
CSS
.container {
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:stretch;
display:-moz-box;
-moz-box-orient:horizontal;
-moz-box-align:stretch;
display:box;
box-orient:horizontal;
box-align:stretch;
color: #ffffff;
}
div {
height: auto;
}
.first {
background-color: #546547;
}
.static {
background-color: #154d67;
width: 660px;
}
.third {
background-color: #c00000;
}
.first, .third {
-webkit-box-flex:1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
First of all, make sure you match the ids.
thr is not the same as three.
The changes I've done to the css:
Indent it. It's good practice.
Declare widths of the divs in percentage of the parent div's size. You hadn't declared the widths at all.
Added a little padding, so that the 3 inner divs stay at the center of the outer div
Here's the CSS:
#x
{
position:relative;
padding:1.5px;
height:34px;
border:1px solid gray;
}
#one
{
height:30px;
border:1px solid red;
width:33%;
float:left;
}
#two
{
height:30px;
border:1px solid green;
width:33%;
float:left;
}
#three
{
height:30px;
border:1px solid blue;
width:33%;
float:left;
}