I am trying to achieve something like this: http://i.minus.com/ibxOaBw7BW8b5g.png
This is what I have so far: http://jsfiddle.net/QAPub/2/
How can I center the wrapper/container? I really don't care if the container exists or not, my main goal is the center the three black divs but this is as far as I have gotten.
HTML:
<div class="clearfix">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.clearfix {
background-color: orange;
display: inline-block;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
There are a couple of different ways you can accomplish this.
Here's the one I would use, put the container in the body and give it margin and position it wherever you want to.
http://jsfiddle.net/QAPub/3/
body{
width:500px;
height:500px;
}
.clearfix {
position:relative;
background-color: orange;
display: block;
width:370px;
height:120px;
margin:auto;
top:20px;
}
.content {
float: left;
background-color: black;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
}
use the following css for ".clearfix "
.clearfix {
background-color: orange;
display:table;
margin:0 auto;
}
here is the jsFiddle file.
Related
I would like to position some DIV by it's distance from the right side of the container, or from the left side from the container, or centered; but everything without of excluding it from the flow, like absolute does.
Is it possible?
The only thing I can is centered. I can't believe this is not easily possible!
#outer {
position: relative;
width: 100%;
}
#first {
position: relative;
background-color: red;
width: 100px;
right: 10px;
}
#second {
position: relative;
background-color: green;
width: 100px;
}
#third {
position: relative;
background-color: yellow;
width: 100px;
margin-left: auto;
margin-right: auto;
}
The sample is here: https://jsfiddle.net/dimskraft/vm3Lg835/8/
If I make absolute position, another DIV starts to ignore absoluted one...
UPDATE
Visual explanation of what I want:
UPDATE 2
Incredible!
Isn't this task have simple solution? Without any cheating / hacking??
I just want to set distance from right side. Why can't I do this with ONE property???
This one do what you ask, keeping the flow and your original html structure.
I also added a "centered" div, which you commented might be needed.
(As per request, I added a second group of 3 div's in below sample using margins only, and here is also a fiddle: http://jsfiddle.net/qxvoLr5u/2/)
html, body {
margin: 0;
}
#outer {
width: 100%;
text-align: right;
}
#first {
display: inline-block;
width: 100px;
background-color: red;
text-align: left;
margin-right: 10px;
}
#second {
background-color: green;
width:100px;
text-align: left;
}
#third {
display: inline-block;
background-color: yellow;
width:100px;
text-align: left;
position: relative;
right: 50%;
margin-right: -50px;
}
/* sample 2 */
#outer2 div:before {
content: attr(class);
}
.div1 {
width: 100px;
margin-left: auto;
margin-right: 10px;
background-color: red;
}
.div2 {
width: 100px;
margin-right: auto;
background-color: green;
}
.div3 {
width: 100px;
margin-left: auto;
margin-right: auto;
background-color: yellow;
}
<div id="outer">
<div id="first">
</div>
<div id="second">
</div>
<div id="third">
</div>
</div>
<br />
<hr />
As per request, these 3 divs use margin only<br />
<hr />
<div id="outer2">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
I would probably wrap it in another relative div that has text-align:right and then give first display:inline-block:
https://jsfiddle.net/aqvug8uj/2/
I think this is best solution https://jsfiddle.net/vm3Lg835/6/
CSS
#outer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
#first {
background-color: red;
width:100px;
right:10px;
align-self: flex-end;
margin-right: 10px;
}
#second {
background-color: green;
width:100px;
}
I found your question to be a bit confusing, to be honest. If I have understood you correctly, aligning stuff the way you describe it is simple, to the point of being trivial, with float and clear.
#outer {
width=100%;
}
#first {
background-color: red;
width:100px;
float: right;
margin-right:10px;
}
#second {
background-color: green;
width:100px;
clear: right;
}
#third {
background-color: yellow;
width:100px;
margin-left: auto;
margin-right: auto;
}
Is that what you wanted to achieve? Here's the fiddle.
Use the following code:
HTML:
<div id="outer">
<div id="first"> </div>
<div id="second"> </div>
<div class="clearboth"></div>
</div>
CSS:
#outer {
position: absolute;
}
#first {
background-color: red;
width:100px;
float: left;
}
#second {
background-color: green;
width:100px;
float: right;
}
.clearboth
{
clear: both;
}
UPDATEDAdd margin-left: 100px; according to your need.
It should work for you.
Take a look
#outer {
position: relative;
width=100%;
}
#first {
margin-left:350px;
position: relative;
background-color: red;
width:100px;
right:10px;
float:left;
}
#second {
position: relative;
background-color: green;
width:100px;
float:left;
}
<div id="outer">
<div id="first"> </div>
<div id="second"> </div>
</div>
body {
background-color: #E6E6FF;
}
#header {
padding-top: 50px;
text-align: center;
height: 100px;
}
#footer {
text-align: right;
}
#navMenu {
background-color: #42424C;
text-align: center;
border-style: solid;
border-color: #42424C;
padding:10px;
}
#leftside {
width:200px;
float:left;
min-height: 500px;
border-style: solid;
border-color: #42424C;
}
#content {
border-style: solid;
border-color: #42424C;
padding: 10px;
min-height: 500px;
}
<div id="header">Header</div>
<div id="navMenu">Menu</div>
<div id="leftside">left side</div>
<div id="content">content</div>
<div id="footer">footer</div>
how it looks:
My Problem:
See the red arrow in the picture the #content goes over the #leftside I want the #content to start after #leftside how can I do this? Also I wand #leftside and #content to always be the same height, I can not set fixed height because thre can be a lot of stuff in content and it might be long and I want my #left side to last until #content ends and #footer begins is it possible to do so? Any help appreciated!
you can do it by js like this
<script>
var content=document.getElementById('content').style.height;
var leftside=document.getElementById('leftside').style.height;
if(left>right)
{
document.getElementById('content').style.height=leftside;
}
else
{
document.getElementById('leftside').style.height=content;
}
If you don't care for IE6 and IE7 users, simply use display: table-cell for your divs:
check here
Note the use of wrapper with display: table.
For IE6/IE7 users - if you have them - you'll probably need to fallback to Javascript.
One way of keeping the sidebar the same height as the content is to display them as table-cell. This way the two cells will always be the same height.
Using your code above, I have added a few extra lines of CSS and wrapped the main content in a div wrapper.
body {
background-color: #E6E6FF;
}
#header {
padding-top: 50px;
text-align: center;
height: 100px;
}
#footer {
text-align: right;
}
#navMenu {
background-color: #42424C;
text-align: center;
border-style: solid;
border-color: #42424C;
padding: 10px;
}
#leftside {
width: 200px;
min-height: 500px;
border-style: solid;
border-color: #42424C;
}
#content {
border-style: solid;
border-color: #42424C;
padding: 10px;
min-height: 500px;
}
.main-wrap {
display: table;
width: 100%;
min-height: 500px;
}
#leftside,
#content {
display: table-cell;
}
<div id="header">Header</div>
<div id="navMenu">Menu</div>
<div class="main-wrap">
<div id="leftside">left side</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
You could also look at CSS flexbox
I want to make all divs side by side.
I mean remove the space form top of the #div3 and #div4.
I tried float and display:inline-block
my code :
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
#div1 {
display: inline-block;
width:220px;
height:120px;
border: 1px solid red;
}
#div2 {
display: inline-block;
width:260px;
height:260px;
border: 1px solid green;
}
#div3 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
#div4 {
display: inline-block;
width:100px;
height:160px;
border: 1px solid green;
}
http://jsfiddle.net/u5y6tuwm/
One solution is to use flex in the parent container:
#wrapper {
display: flex;
/*set display to flex*/
margin-top: 20px;
}
#wrapper > div {
margin-right: 10px;
/*add some margin to the right to direct children div*/
}
#div1 {
width: 220px;
height: 120px;
border: 1px solid red;
}
#div2 {
width: 260px;
height: 260px;
border: 1px solid green;
}
#div3 {
width: 100px;
height: 160px;
border: 1px solid green;
}
#div4 {
width: 100px;
height: 160px;
border: 1px solid green;
}
<div id="wrapper">
<div id="div1">The first</div>
<div id="div2">next to each other.</div>
<div id="div3">The two divs are</div>
<div id="div4">The two divs are</div>
</div>
vertical-align: top;
to each div1, 2, 3 and 4
you can add this to affect all divs on the page
div {
vertical-align: top;
}
or this for all divs within #wrapper div
#wrapper div {
vertical-align: top;
}
or this to target each div you want ( 1-4 )
#div1, #div2, #div3, #div4 {
vertical-align: top;
}
or to each one individually, or inline style and so on.
You just need to add
#div1, #div2, #div3, #div4 {
float:left;
}
This will work perfectly. Also do not forget to clear the float after
I am having trouble with some floated boxes in CSS.
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>
Here is the pen:
http://codepen.io/anon/pen/myKzMd
I want the left green box to start on the same height as the red one. HTML structure should stay as is.
Thanks,
Sascha
This code below will get the result you want.
HTML
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>
CSS
.container {
height:400px;
border: 5px solid green;
}
.one {
height: 100px;
background: red;
width: 60%;
float: right;
margin-bottom: 10px;
}
.two {
height: 100px;
background: blue;
width: 60%;
float: right;
}
.tre {
height: 150px;
background: green;
width: 40%;
}
EDIT: Updated the answer with full code, to avoid confusing, since OP has updated the demo in the question. So no float on .tre would be the best solution to me.
.tre {
float: left;
}
Dont forget to put overflow:hidden in parent div ie .container because once you float the child elements you have to put overflow:hidden in its
try this out :
.container {
height:400px;
border: 5px solid green;
}
.one {
height: 100px;
background: red;
width: 60%;
float: right;
margin-left:40%;
margin-bottom: 10px;
}
.two {
height: 100px;
background: blue;
width: 60%;
float: right;
}
.tre {
height: 150px;
background: green;
width: 40%;
}
.container {
height:400px;
border: 5px solid green;
}
.one {
width: 40%;
height: 100%;
float: left;
background: blue;
}
.two, .three {
width: 60%;
height: 50%;
float:right;
}
.two {
background: yellow;
}
.three {
background: red;
}
You can change your structure like below...
<div class="container">
<div class="one">One</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
<div class="two">Two</div>
</div>
I'm setting my div display as table-cell like this.
HTML
<div id="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="lastchild">4</div>
</div>
CSS
.child{
background: red;
width: 20px;
display: table-cell;
}
.lastchild {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
}
.parent {
width:200px;
}
http://jsfiddle.net/Lx1p3y93/
I wonder if there's any way I can set the rightmost cell right aligned?
Change CSS to:
.lastchild {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
float:right;
}
.child {
background: none repeat scroll 0 0 red;
display: table-cell;
float: left;
width: 20px;
}
Remove table-cell property and use float property. Update your CSS like below.
.child{
background: red;
width: 20px;
float:left;
}
.lastchild {
background: blue;
width: 20px;
margin-right: 0;
float:right;
}
FIDDLE DEMO
How about pseudo elements? demo
.child{
background: red;
width: 20px;
display: table-cell;
float:left;
}
.child:last-child {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
float:right;
}
.parent {
width:200px;
}
For this purpose you can use this piece of code into your .lastchild class:
.lastchild {
background: blue;
width: 20px;
display: table-cell;
margin-right: 0;
float: left;
}
This will align the .lastchild item to the most right of the .parent element