<html>
<style>
#left{
width:50%;
height:200px;
float:left;
border:2px solid black;
}
#down{
width:50%;
height:200px;
border:2px solid black;
float:left;
}
#right{
width:40%;
height:200px;
border:2px solid black;
float:right;
}
</style>
<body>
<div id="left"></div>
<div id="down"></div>
<div id="right"></div>
</body>
</html>
How can i get "right" div to the right-top without changing anything inside html?
On First image is how it looks like
On Second image is how it need to look like.
Also i don't need to use relative absolute because if i zoom or un-zoom it will be messed up
is use this, it works for this example
EDIT : i put "justify-content:space-between" in body to be exactly like your picture
#left{
width:50%;
height:200px;
border:2px solid black;
}
#down{
width:50%;
height:200px;
border:2px solid black;
}
#right{
width:40%;
height:200px;
border:2px solid black;
overflow:hidden;
}
body{display:flex;
flex-wrap:wrap;
justify-content:space-between;}
.box:nth-child(2){
order:2;
}
<html>
<body>
<div class="box" id="left"></div>
<div class="box" id="down"></div>
<div class="box" id="right"></div>
</body>
</html>
Another option is to use flexbox, but you need a container for the items.
Maybe is so generic.
body {display: flex; flex-flow: row wrap-reverse;}
Here's one solution:
Added
position:absolute;
right:0;
to #right
#left{
width:50%;
height:200px;
float:left;
border:2px solid black;
}
#down{
width:50%;
height:200px;
border:2px solid black;
float:left;
}
#right{
width:40%;
height:200px;
border:2px solid black;
position:absolute;
right:0;
}
<div id="left"></div>
<div id="down"></div>
<div id="right"></div>
Use display:inline-block and vertical-align:top instead of float.
#left, #right, #down {
display:inline-block;
vertical-align:top;}
the best way is just add #right{transform:translatey(-100%);}
Related
I am facing the problem to align the content div in a data div. The Data div was not fixed
height. Because it was auto height when the content div increase.
But it was going to out of flow. How to solve it ?
.container
{
position:relative;
border:1px solid blue;
margin:auto;
width:200px;
}
.data
{
position:relative;
border:1px solid green;
width:100px;
top:10px;
left:10px;
}
.hed
{
position:absolute;
border:1px solid orange;
width:30px;
height:10px;
top:-5px;
left:10px;
border-radius:5px;
background-color:orange;
line-height:10px;
}
<div class="container">
<div class="data"> This is absolute.</div>
<div class="hed">xxx</div>
</div>
If you want to have the container expand as the data div expands, add <br style = "clear:both"> before the closing div tag.
FIDDLE
You can set
overflow:hidden;
to the "container" div
change all css position to relative and use min-height then try
like this
.container {
position:relative;
border:1px solid blue;
margin:auto;
width:200px;
min-height:10px; //added
}
.data {
position:relative;
border:1px solid green;
width:100px;
top:10px;
left:10px;
}
.hed {
position:relative; //changed
border:1px solid orange;
width:30px;
height:10px;
top:-50px; //changed
left:10px;
border-radius:5px;
background-color:orange;
line-height:10px;
}
WORKING DEMO
Why are you using for div class="data":
top
left
You juste need to replace them by margin-top and margin-left.
.container
{
position:relative;
border:1px solid blue;
margin:auto;
width:200px;
}
.data
{
position:relative;
border:1px solid green;
width:100px;
margin-top:10px; // changed
margin-left:10px; // changed
}
.hed
{
position:absolute;
border:1px solid orange;
width:30px;
height:10px;
top:-5px;
left:10px;
border-radius:5px;
background-color:orange;
line-height:10px;
}
<div class="container">
<div class="data"> This is absolute.</div>
<div class="hed">xxx</div>
</div>
I'm really sorry to post this. I've read dozens of posts on this same issue, but I just can't solve this. How do I place the blue and green boxes side-by-side? I've got plenty of space in my wrapping div, and I think that I am dealing with float correctly, but still incorrect results. What gives?
<div class="titleframe" >
<div class="image" >
<img id="thief" src="thief.png">
</div>
<div class="titletext">
<h1>My Title</h1>
<p>Line1<br>Line2<br>Line3</p>
</div>
</div>
.titleframe {
margin:0 auto;
width:750px;
clear:left;
height:300px;
border: 1px solid red;
}
.image {
width:100px;
height:250px;
border: 1px solid blue;
}
.titletext{
position:relative;
float:left;
padding-left:25px;
padding-top:0px;
height:150px;
width:250px;
border: 1px solid green;
}
Add float:left; to your .image class. Here is a fiddle: http://jsfiddle.net/36KP5/
.image {
width:100px;
height:250px;
border: 1px solid blue;
float:left;
}
Fiddle
You can either float the first one left, and add margin-left to the second one:
.titleframe {
margin:0 auto;
width:750px;
clear:left;
height:300px;
border: 1px solid red;
}
.image {
width:100px;
height:250px;
border: 1px solid blue;
float:left;
}
.titletext{
position:relative;
margin-left: 101px;
padding-left:25px;
padding-top:0px;
height:150px;
width:250px;
border: 1px solid green;
}
Or you can float them both left.
Pink and green layout are parent layout. When gray layout is clicked blue layout will be created. I want blue layout overlay the parent layout (pink and green) and comes to top.
But the blue layout is overlay by pink layout. I need help on it.
div{
display:block;
}
#content{
height:400px;
width:100%;
background-color:green;
}
.center{
width:100px;
height:100px;
background-color:#808080;
text-align: center;
margin:auto;
}
#foo{
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
}
<div id="content">
<div id="d" class="center">
<div class="center">
Click here to create new blue element
</div>
</div>
<div style="background-color:pink;width:100%;height:20px;"></div>
</div>
Check JSFiddle
Add some positioning and a z-index...
#foo{
position: relative;
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
z-index: 1;
}
DEMO
You need to adjust the z-index. z-index needs to be positioned to work correctly. See jsfiddle.
#foo{
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
position:relative;
z-index:100;
}
Can I suggest absolute positioning?
#foo{
position:absolute; // <-- here is the change
background-color:#2060ff;
border: 1px solid #000;
width:50px;
height:50px;
}
This, of course, is if I understand your question correctly...
What you need to do is to use a z-index. According to http://www.w3schools.com/cssref/pr_pos_z-index.asp specifies the stack order of an element. Please note you will have to make the div's relative Please see code
http://jsfiddle.net/wbfTq/16/
div{
display:block;
}
#content{
position: relative;
height:400px;
width:100%;
background-color:green;
}
.center{
width:100px;
height:100px;
background-color:#808080;
text-align: center;
margin:auto;
}
#foo{
position: relative;
background-color:#2060ff;
z-index:1px;
border: 1px solid #000;
width:50px;
height:50px;
}
Do let me know if this answers your question!
I am trying to keep the header still and have the rest of the content scroll underneath it. I am able to achieve this, however when I put a fixed position on my two header divs the break out of the margin auto.
css:
.structure {
width:960px;
padding:20px;
margin:0px auto 0px auto;
background:#121212;
border-left:5px #F06BA8 solid;
border-right:5px #F06BA8 solid;
}
.header_home_structure {
width:960px;
margin:0px auto 0px auto;
position:fixed;
height:80px;
}
.header_home_bg {
width:100%;
background:#121212;
border-bottom:3px #F06BA8 solid;
height:80px;
position:fixed;
}
html:
<body>
<div class="header_home_bg clearfix">
<div class="header_home_structure clearfix">
</div>
</div>
<div class="structure clearfix">
</div>
</body>
Just use position: fixed on the container div, don't use it twice
Demo
.structure {
width:960px;
padding:20px;
margin:0px auto 0px auto;
background:#121212;
border-left:5px #F06BA8 solid;
border-right:5px #F06BA8 solid;
}
.header_home_structure {
width:960px;
margin:0px auto 0px auto;
height:80px;
}
.header_home_bg {
width:100%;
background:#121212;
border-bottom:3px #F06BA8 solid;
height:80px;
position:fixed;
}
I am trying for a or b to to match their height when one or the other one extends.
<html>
<head>
<style>
#main{
width:300px;
position: relative;
margin: 0 auto;
}
#a{
position:absolute:
bottom:0px;
width:50px;
border: 1px solid #000;
float:left;
}
#b{
position:absolute:
bottom:0px;
width:200px;
border: 1px solid #000;
float:left;
}
</style>
<body>
<div id="main">
<div id='a'><h1>1</ht><h1>1</ht><h1>1</ht><h1>1</ht></div>
<div id='b'>2</div>
</div></div></head></body>
I have a very simple solution. Use css attribute display: table-cell; in .a{} & .b{} style like this:
.a, .b{
display: table-cell;
width:100px;
vertical-align:middle;
text-align:center;
}
See the Demo: http://jsfiddle.net/rathoreahsan/qcCPG/6/