Take a look at this image...
All of the boxes are divs. How can I position them like that? Here's what I got so far...
#container{
position:relative;
padding:25px;
}
#div1 {
float:left;
margin-left: 50px;
margin-top: 50px;
width: 300px;
padding:25px;
}
#div2 {
clear:both;
margin-left: 50px;
width: 300px;
padding:25px;
}
#div3 {
float:right;
margin-right: 50px;
margin-top: -100px;
width: 300px;
padding:25px;
}
With the code above..div1 and div2 is position properly somehow. But div3 is on the lower part of the page.
I would float:right div3 and have it first in your HTML and then just have div1 and div2 not floated.
Something like this: http://jsfiddle.net/eErVT/
...or you could wrap div1 and div2 in its own wrap, and float that.
Wrap your left divs in a single column. So your markup would look something like this:
<div id="container">
<div id="main">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
<div id="div3">div3</div>
</div>
Then your css would look like this:
#container{
position:relative;
padding:25px;
}
#main {
float:left;
width:100px;
}
#div1 {
padding:25px;
}
#div2 {
padding:25px;
}
#div3 {
float:right;
width: 100px;
padding:25px;
}
Here's an example fiddled: http://jsfiddle.net/neilheinrich/ez2rQ/
An alternate that doesn't require adding extra divs is to use absolute positioning on div3, along with extra padding on container to create space for div3.
See the fiddle here: http://jsfiddle.net/y2fJS/
CSS:
div {
border: 1px solid blue;
}
#container{
position:relative;
border-color: green;
padding: 50px 200px 50px 50px; /* right padding (150) should include div3 width+padding+margin */
}
#div1 {
padding:25px;
}
#div2 {
padding:25px;
}
#div3 {
position: absolute;
top: 50px;
right: 50px;
width: 50px;
padding:25px;
}
EDIT: One problem I forgot to mention is that the absolutely positioned div3 will no longer contribute to the height of the outer div. So, if you have a long div3 this may not work without some additional trickery.
Here this looks like your picture, but i would suggest looking at sites like http://www.cssplay.co.uk/ for site design.
<html>
<head>
<title>Div Positioning</title>
<style type='text/css'>
#div1
{
position: absolute;
top: 25px;
left: 25px;
height: 200px;
width: 200px;
border: 1px solid red;
}
#div2
{
position: absolute;
top: 250px;
left: 25px;
height: 200px;
width: 200px;
border: 1px solid red;
}
#div3
{
position: absolute;
top: 25px;
left: 250px;
height: 425px;
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
</body>
</html>
Related
I have an outer and inner box with position set to relative. What i want should look like this:
The code is:
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin-left:100px;
margin-top:100px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
With this style the outer div no more wraps the inner box:
CSS
.innerbox {
position: relative;
float: left;
width: 100px;
height: 50px;
margin: 0;
left: 100px;
top: 100px;
background: green;
border: 2px solid red;
}
Thank you.
* Update *
I would like to add that i don't want to fix the height of the outer box. Thanks.
Is it possible to get a similar result with margin:0 and changing only top and left values in innerbox?
Not really.
Relative positioning moves an element from it’s “default” position that it would normally have - but it keeps the original space it would have required reserved, it does not make it “take” the space at the position it was moved to. So while you can move the inner element to the place you want it, it will not make the outer element “grow” accordingly.
I don't want ("mis")use margin for positioning the inner div
Don’t worry about the “semantics of CSS” too much here … There is often more than one way to achieve a desired optical result, and seldom one way is “wrong” and the other one “right”.
As long as the solution you have achieves what you want, and is not hindered by other restrictions - use it!
When the outerbox has position: relative you can use position: absolute for the .innerbox so you can give dimensions to the .outerbox (width and height) and you can use top and left to position the inner rectangle on every position you want...
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
width:200px;
height:100px;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
}
.innerbox {
position: absolute;
width: 100px;
height: 50px;
left:98px;
top:48px;
background: green;
border: 2px solid red;
}
<body>
<div class="outerbox">
<div class="innerbox">
</div>
</div>
</body>
Hope this will help you.
body {
background-color: lightblue;
width: 100%;
height: 100%;
}
.outerbox {
position: relative;
float: left;
left: 30px;
top: 50px;
background: orange;
border: 2px solid red;
height:200px;
width:300px;
}
.innerbox {
position: absolute;
float: left;
width: 100px;
height: 50px;
margin: 0;
/*left: 100px;
top: 100px; */
bottom:0;
right:0;
background: green;
border: 2px solid red;
}
<div class="outerbox">
<div class="innerbox">
</div>
</div>
This question already has answers here:
Transparent half circle cut out of a div
(8 answers)
Closed 8 years ago.
Does anyone have an idea how to apply a background (in css) as you can see on the picture attached ?
Thanks
div {
background:lightgreen;
width:100%;
height:200px;
position:relative;
text-align:center;
padding:100px 0 0 0;
box-sizing:border-box;
}
div:before {
content:'';
position:absolute;
background:white;
width:100%;
height:100px;
top:0;
left:0;
border-radius:40%;
transform:translatey(-50%);
}
<div>div</div>
Something like this?
#wrapper {
position: relative; /* position:absolute needs a relative parent */
}
#main {
width: 100px;
height: 50px;
background-color: green;
text-align: center;
}
#cutout {
width: 100px;
height: 50px;
border-radius: 50px / 25px; /* half of width / half of height
http://css-tricks.com/the-shapes-of-css/
remember to add vendor prefixes if necessary */
background-color: white;
position: absolute;
top: -30px; /* should be -25px, but a little padding looks nicer */
}
<div id='wrapper'>
<div id='cutout'></div>
<div id='main'><br>div</div>
</div>
Check the DEMO
<div id="wrapper">
<div id="inner"></div>
</div>
#wrapper {
width: 600px;
height: 300px;
margin: auto;
margin-top: 50px;
background-color: green;
overflow: hidden;
}
#inner {
width: 1200px;
height: 1200px;
border-radius: 600px;
background-color: #fff;
position: relative;
top: -1100px;
left: -300px;
}
I have 2 divs next to each other.
The wrapper size is width:100%.
The right aligned div is 230px.
The div that is next to the right aligned one needs to be centered in the container to remain responsive.
The left margin was just temporary because it was hugging the left aligned div.
CSS
.wrapper{
width: 100%;
margin: 0 auto;
}
.col-browse{
float: left;
width: 230px;
}
.col-content{
float: left;
width: 1080px;
margin-left: 30px;
}
HTML
<div class="col-browse">
</div>
<div class="col-content">
</div>
Thanks!
EDIT: http://i.imgur.com/8Y7XXAx.png
This is what im getting and i need the middle part to be centered while keeping the left column snapped to left
you can try the below css code.
.wrapper{
width: 100%;
margin: 0 auto;
}
.col-browse{
float: right;
width: 18%;
border: 1px solid #cccccc;
height: 100px;
}
.col-content{
width: 82%;
margin:0 auto;
border: 1px solid #000;
height: 100px;
}
Define width of container of where element will be centered within (this element position: relative; centered element will simply be inside of previous mentioned and margin: 0 auto; have div which is not to be within container (right div), simply float:right; outside of.
Try CSS below:
html,body,.wrapper{
width: 100%;
margin: 0 auto;
}
.wrapper{
position:relative;
}
.col-browse{
position:absolute;
text-align:center;
width: 230px;
}
.col-content{
text-align:center;
width: 1080px;
margin-left: 30px;
}
Demo
If you want it to be centered in all screen sizes then try following fiddle:
Demo2 (Updated)
The following example could help you achieve the style you want
the CSS
.l,.r{
width:30%;
height:200px;
background:red;
}
.l{
float:right;
}
.r{
margin:0 auto;
}
.wrap{
float:left;
width:70%;
background:blue;
}
the html
<div class="wrap">
<div class="r"></div>
</div>
<div class="l"></div>
working Example JSFIDDLE
try using relative values (percent), this will help you to create a responsive website. The example:
http://jsfiddle.net/XkPay/
.wrapper{
width: 100%;
}
.col-browse{
float: left;
width: 18%;
background-color:black;
}
.col-content{
float: left;
width: 82%;
background-color:red;
}
probably this is what you need..
FIDDLE
.wrapper{
width: 100%;
height:500px;
margin: 0 auto;
background-color:Yellow;
}
.col-browse{
float: left;
width: 20%;
height:500px;
background-color:Red;
}
.col-content{
width: 80%;
height:500px;
margin-left:21%;
background-color:Blue;
}
This attempt keeps the width of the sidebar and the width of the centered content constant.
HTML
<div class="right">
<div class="center"></div>
</div>
<div class="left"></div>
Centered to window
Fiddle
CSS
div.left {
float: left;
width: 230px;
height: 20px;
position: relative;
}
div.right {
height: 20px;
position: absolute;
left: 0;
right: 0;
}
div.center {
height: 50px;
width: 50px;
margin: 0 auto;
}
Centered to column
Fiddle
CSS
div.left {
float: left;
width: 230px;
height: 20px;
}
div.right {
height: 20px;
position: absolute;
right: 0;
left: 230px;
}
div.center {
height: 50px;
width: 50px;
margin: 0 auto;
}
Note: I would recommend centered to column, personal design preference. If you center to window the blank space would be off-balance. Again, just my opinion.
I have a a design problem. I have a centered logo on a page, What I want is a div centered between the left side of the page and te left side of the logo.
how could I achieve this using only css ?
Here is the example:
Take a look at this demo...
http://jsfiddle.net/UnsungHero97/7Z5fu/
HTML
<div id="wrapper">
<div id="box-left">
<div id="left"></div>
</div>
<div id="box-center">
<div id="center"></div>
</div>
</div>
CSS
html, body {
margin: 0 !important;
padding: 0 !important;
}
#wrapper {
width: 100%;
}
#box-center, #box-left {
width: 50%;
float: left;
}
#left {
border: 1px solid magenta;
height: 50px;
width: 50px;
position: relative;
left: 50%;
/* half of width of #left + half of margin-left of #center */
margin-left: -75px; /* 50/2 + 100/2 = 25 + 50 = 75 */
}
#center {
border: 1px solid magenta;
height: 50px;
width: 200px;
margin-left: -100px;
}
I hope this helps.
It will work if the logo width can be fixed, here’s the code.
HTML:
<div id="logo"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>
<div id="otherdiv"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>
CSS:
#logo {
width: 100px;
height: 50px;
position: absolute;
top: 50px;
left: 50%;
margin-left: -50px;
text-align: center;
}
#otherdiv {
text-align: center;
position: absolute;
top: 50px;
left: 0;
width: 50%;
margin-left: -50px; /* Half of the logo width */
}
#logo img,
#otherdiv img {
width: 100px;
}
#otherdiv img {
margin-left: 50px; /* Half of the logo width */
}
Here i have separate two divs that left and right, there is one div inside of the leftDiv that is X_div make it as width:20% and margin:0 auto. if resolution extend, x_div will also extend as per your requirement.
#leftDiv {
width:30%;
height:auto;
}
#leftDiv X_Div {
width:20%;
height:auto;
margin:0 auto;
}
#rightDiv {
width:70%;
height:auto;
}
How do I position an element absolutely from the top, but relatively from the sides.
I.e., the object needs to be Xpx. from the top (absolute) and stay centered from the sides.
I tried the following CSS, but it was not working.
position: absolute; top: 105px;
margin: 0 auto;
Thank you.
I would place it inside a container that had absolute positioning, and then make it's postition relative to that.
#container { position: absolute; top: 105px; }
#box { position: relative; margin: auto; }
Then just:
<div id="container">
<div id="box">
</div>
</div>
This is just off the top of my head.
Live Demo
<style type="text/css">
div { padding: 5px; }
#outer {
border: 1px dotted #F00;
position: absolute;
top: 105px;
right: 0px;
left: 0px;
}
#inner {
border: 1px dotted #0F0;
margin: 0 auto;
text-align: center;
width: 200px;
}
</style>
<div id="outer">
<div id="inner">Banner</div>
</div>
If it has a known, fixed width, set the margin-left to negative half the overall width:
#banner { position:absolute; width:400px; left:50%; margin-left:-200px }