I am trying to do what showed in the following example: http://jsfiddle.net/A8zLY/5/
but the order of the divs shuold be opposite, I need the left div first (I need the div with the role width:auto; to be first):
<div class="left"></div>
<div class="right"></div>
One way to achieve the same layout with the order of divs changed in the markup is to use absolute positioning :
.container {
width:600px;
height:200px;
border:1px solid;
position:relative;
}
.left {
margin-left:200px;
height:200px;
background:red;
}
.right {
height:200px;
width:200px;
background:blue;
position:absolute;
top:0; left:0;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
change .right class float:left to float:right
code:
.right{float:right;}
Related
I have this sample
link
CODE HTML:
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
CODE CSS:
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
I want to move div on the right (.right) to be in line with div website (banner) without changing HTML code (just CSS).
I tried to add margin-top:-6em look different on other resolutions.
Can you help me to solve this problem?
Thanks in advance!
If you can only change the CSS, you have to use margin-top:-100px instead of margin-top:-6em if you want to align it. https://jsfiddle.net/ck3pux8x/1/
But the best solution would be changing the HTML to move the .right div outside the .inner an place it next to the .banner and make .banner float right. https://jsfiddle.net/ck3pux8x/2/
HI now try to this define your body position relative and your class .right position absolute and left or top according to your requirement .
as like this
body{
position:relative;
}
.right {
background: aqua;
position: absolute;
left: 400px;
top: 0;
}
Demo
.right{
position:absolute;
left:400px;
top:0;
}
body{position : relative;}
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
You can use relative re-positioning in this case:
.right{
background:aqua;
position: relative;
top: -100px;
}
https://jsfiddle.net/ck3pux8x/4/
Long challenge I have had, and I just need to ask for help now.
I have a container for divs:
<div id="container">
<div id="1">Bla</div>
<div id="2">Bla</div>
<div id="3">Bla</div>
<div id="4">Bla</div>
<div id="5">Bla</div>
</div>
Now, div 1 and 2 should be fixed and floating on the left. Width 50%. All the other divs, should be on the right and just continue to float on the right no matter how long and how many divs I add. Width is also 50%.
Im thinking of something like this:
|--1--|--3--|
|--2--|--4--|
|-----|--5--|
|-----|--6--|
|-----|-----|
Any tips? I am just confused on relative and absolute and what is supposed to float where...
I should add, div 1 and 2 should be "scroll" fixed. So position: fixed. Its a bit how the facebook newsfeed is strcutured.
Any help is greatly appreciated. :)
I think i solved your problems. You can use this code for your problem it may be help me.You can add many div in second column but you should use this width:50%; background:pink; float:left; margin-left:50%; css code. You can change background according to you.
Live Working Demo
HTML Code:
<div id="container">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="four">4</div>
<div id="five">5</div>
<div id="six">6</div>
<div id="seven">7</div>
</div>
CSS Code:
#container
{
width:100%;
height:100%;
}
#one
{
width:50%;
background:red;
}
#two
{
width:50%;
background:green;
float:left;vertical-align:top;
}
#three
{
width:50%;
background:blue;
float:left;
margin-top:-20px;
}
#four
{
width:50%;
background:gray;
float:left;
margin-left:50%;
margin-top:-20px;
}
#five
{
width:50%;
background:violet;
float:left;
margin-left:50%;
}
#six
{
width:50%;
background:gold;
float:left;
margin-left:50%;
}
#seven
{
width:50%;
background:pink;
float:left;
margin-left:50%;
}
Result:
how do i make divs display at the bottom of the screen inline (following each other horizontally like facebook chat) and also overlapping their parent div. i have tried the following but does not work.
<div id="container">
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</div>
#container{
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
#box{
border:1px solid blue;
width:250px;
height:300px;
display:inline-table;
position:fixed;
bottom:0;
}
Wrap the elements in another container div, which is positioned absolutely.
Firstly, you can't use duplicate id's. Use classes instead.
Your HTML will be something like:
<div id="container">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
You can't use display:inline-table and fixed together. Use position:absolute or position:fixed (if you want to make the items stick) for the container div, and for instance display:inline-block for the .box elements to get them inline.
#container {
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
.box-container {
position:absolute;
bottom:0;
height:40px;
width:100%;
}
.box{
border:1px solid blue;
width:250px;
height:40px;
display:inline-block;
}
See http://jsfiddle.net/B228U/1/ for an example.
Cheers,
Jeroen
You can´t give same id to different elements. Use class. Also give main div position:relative and float:left to rhe class box. Like this:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
#container{
height:10px;
position:absolute;
bottom:0;
width:1000px;
margin:0 auto;
}
.box{
border:1px solid blue;
width:250px;
height:300px;
float:left;
display:inline-table;
position:relative;
bottom:0;
}
http://jsfiddle.net/7kwLc/
Consider a simple example with html
<div class="parent">
<div class="child">
</div>
</div>
and CSS
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:40px;
left:30px;
width:70px;
height:70px;
background:blue;
}
to place a DIV with absolute position just beneath its parent (with relative position).
In this example, I equaled the absolute's top to the parent relative's height.
How to align the absolute DIV just under the parent when the height is unknown (both parent and child)?
Didn't think this would work myself, but it seems to:
html, body {
height: 100%;
}
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:100%;
left:30px;
width:70px;
height:70px;
background:blue;
}
Check this..
HTML:
-------
<div class="parent">
</div>
<div class="child">
</div>
CSS:
-----
.parent{
position:relative;
background:red;
width:200px;
height:40px;
}
.child{
position:absolute;
top:auto;
left:30px;
width:70px;
height:70px;
background:blue;
}
(Example)
you can use negative value for bottom, eg. bottom: -100px
EDIT: here is better solution: http://jsfiddle.net/mqy4z/3/ - set child's position to top:100%
Try placing both div's in your HTML file under eachother:
<div class="parent">
</div>
<div class="child">
</div>
I have a problem with 3 divs next to each other. The one on the left is constant and its width doesn't change. The center one needs to contract and expand according to the div on the right, as it is also expanding because it is a cart. I have the website available for you, so you can see the problem.
This is what I want:
[div=constant width]
[div=expanding/contracting]
[div=expanding/contracting]
Details:
Site: http://ssdbutikken.dk/
User: test
Pass: qwertytest
You can use display:table for this. Write like this:
HTML
<div class="parent">
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
</div>
CSS
.parent{
width:100%;
display:table;
}
.left,.middle,.right{
display:table-cell;
background:red;
}
.left{
width:100px;
}
.middle{
background:yellow;
}
.right{
background:blue;
}
Check this http://jsfiddle.net/jAquQ/
It's work till IE8 & above.
.constant
{
float:left;
width:200px;
margin-left:auto;
margin-right:auto;
}
.constant_2
{
float:right;
width:700px;
margin-left:auto;
margin-right:auto;
}
<div>
<div class="constant "></div>
<div align="center"></div>
<div class="constant_2 "></div>
</div>
float:left will do the work : try this
<div style="float:left;background-color:red;width:200px">left</div>
<div style="float:left;background-color:green">middle</div>
<div style="float:left;background-color:blue">right</div>