I have a three divs and I am giving them absolute positioning. However, they are not staying inside my container div.
Here is the code:
<body >
<div id="container">
<div id="col1"> testing one</div>
<div id="col2"> testing two</div>
<div id="col3"> testing three</div>
<br/><p/>ksjdlfkjsldkjfl;s
Here is the CSS for my three divs and my container:
div#container {
position:reletive;
border-spacing: 10px;
margin: 100px 80px auto;
padding: 0 100px10px;
background-color: #EEEEEE;
width: 800px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border: 1px solid;
}
div#col1{
position:absolute;
float: left;
left:0;
width:220px;
background-color :red;
}
div#col2{
position:absolute;
float: left;
left:220px;
width:220px;
background-color :yellow;
padding: 10px auto ;
}
div#col3{
position:absolute;
float: left;
left:500px;
width:100px;
background-color :green;
padding: 10px auto;
}
I think, firstly, the position of container div should be "relative" , not the "reletive".
Secondly, I think you should use "relative" position instead of "absolute".
Related
I am trying to obtain the following responsive layout
DIVs
with no luck. Can someone please help me ?
DIV1 has width = 100%,
DIV 2, DIV3 and DIV4 have all float:left while DIV5 has float:right; but the layout that I achieve is wrong :(
My attempt to create the image using flexbox.
https://codepen.io/goughjo02/pen/GBLdXW
N.B. instead of float: right;, you can use margin-left: auto; - that has the effect of automatically allocating all free space to the left of the div.
There you go!
I followed your picture.
#wrap {
border-style:solid;
border-width:thin;
padding: 10px;
min-height:50px;
min-width:100%
display: flow-root;
}
#innerwrap{
display: inline-grid;
}
.div_left {
min-width:150px;
max-width:150px;
border-style:solid;
border-width:thin;
text-align:center;
float:left;
margin:5px 10px 5px 10px;
padding: 15px;
}
#div2 {
min-width:150px;
max-width:150px;
border-style:solid;
border-width:thin;
text-align:center;
float:left;
padding: 50px 15px 50px 15px;
}
#right {
min-width:150px;
max-width:150px;
border-style:solid;
border-width:thin;
text-align:center;
float: right;
margin-top:5px;
padding: 15px;
}
Div1
<div id="wrap">
<div id="div2">Div2</div>
<div id="innerwrap">
<div class="div_left">Div3</div>
<div class="div_left">Div4</div>
</div>
<div id="right">Div5</div>
</div>
I am trying to apply margin to specific child div 2*"#child2"* but it applies margin to parent div too. Problem is margin collapse.
<div id="parent">
<div id="child1" class="child">hello1</div>
<div id="child2" class="child">hello1</div>
<div id="child3" class="child">hello1</div>
</div>
CSS
#parent{
overflow:auto;
padding-top: -1px;
margin-top: 1px;
}
.child{
margin:0 30px;
display:inline-block;
background-color: #5395ce;
padding: 5px;
}
#parent{
background-color: #000;
}
#child2{
margin-top: 15px;
}
Here is the code: http://jsbin.com/nibaw/5/edit?html,css,output
Define your your .child class vertical-align:top;
.child{
vertical-align:top;
}
Get rid of
#child2 {
margin-top: 15px;
}
which is adding 15px top margin.
Container #666 has margin: 20px; overflow: hidden;.
Nodes #333 have margin: 20px 0 0 20px; float: left;.
Example, http://jsbin.com/owejal/3/edit or picture:
However, the intended result is:
container with 20px margin,
children with 20px margin in-between, but not with the container.
This could be achieved using negative padding (i.e. if container had padding: -20px 0 0 -20px), though such thing does not exist.
The desired result can be achieved using additional element (http://jsbin.com/owejal/4/), though I am keen to learn whether there is CSS only solution.
If you only care about the spacing between the elements, you can discard the pseudo element. It's only there for the background.
http://codepen.io/cimmanon/pen/mucDv
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo"></div>
The CSS:
.group {
overflow: hidden;
margin: -10px 0 -10px 10px;
padding-right: 10px;
position: relative;
}
.group:before {
display: block;
content: '';
position: absolute;
z-index: -1;
top: 10px;
right: 20px; /* 20px instead of 10px due to padding */
bottom: 10px;
left: 10px;
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 10px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
This is a little hacky, but how about just hiding the top and left margin areas with some strategically placed pseudo-elements?
http://jsfiddle.net/SUJtd/
.foo {height:20px; background:#00f; margin:20px 20px 0;}
.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}
.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;}
No extra HTML tag - but a class change & No Pseudo elements
A simple trick which probably should work for you :
http://jsbin.com/owejal/65/edit
Screenshot:
Will work with all possible number of nodes :)
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo2"></div>
CSS:
.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
height:20px;
background:#00f;
border-top:20px solid white;
margin:20px;
margin-top:-20px;
}
Since you didn't mention resizability as requirement, you could simple use a nth child declaration like in here:
http://jsbin.com/owejal/51/
However, this solution is optimized for fixed widths of parent container, so there should always be 4 elements in a row for example. Nevertheless, its css only.
Change the margin of the node to:
.node { margin: 0 20px 20px 0; }
See http://jsbin.com/owejal/52/edit. Note that this will still give you extra padding at the bottom, but this is a common issue that isn't easily solved. See http://css-tricks.com/spacing-the-bottom-of-modules/ for various ways to solve this (though in the case you presented, none of these solutions work).
The following CSS will get you the desired result, actually you will still have 2 limitations:
If you change the background of body, you need to update the border color for element .foo
The inner nodes still have right margin, this is also the case your desired result screen shot (.group can have 5 nodes, but in this solution it will only have 4).
.group {
overflow: hidden;
margin: 20px; /* margin is required */
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 0px 20px 20px 0px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
.group + .foo {
height: 20px;
background: #00f;
margin: 20px;
position: relative;
top:-40px;
border-top: 20px solid #fff;
}
You can still find the solution here
I have an iframe inside a class in the center of my page. If you click any of the two radio buttons at the top, the form expands depending on which one you select. If the form is floated right or left, it will expand when one of these buttons is pushed and the gray area below it (the employer and freelancer text section) will move down on the page. When I align the form in the center of the page, I can't get it to have the property associated with floating that moves the rest of the page down. Instead, it simply covers up the gray background with text area. My site is up at avidest.com/new. How can I make the form stay in the center but behave like it were floating? Here is my css:
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;}
.slider { background: transparent; margin:0 auto; padding:0; height:420px;}
.slider .gallery { margin:0 auto; width:980px; height:420px; padding:0;}
.formbox{ width: 48%; padding: 45px 60px 20px 0px; margin-top: 30px;background-color:#ffffff;
border:1px solid black;opacity:0.91;filter:alpha(opacity=91); /* For IE8 and earlier */
border-radius: 10px;margin-left: auto;margin-right: auto;}
.body { background: #bebebe; border-top: 0px solid; border-color: #e3e3e3; }
.body_main_page { width:470px; float:left; margin:0; padding:15px 10px;}
And here is the html:
<div class="main>
<div class="slider">
<div class="gallery">
<div class="formbox"> form is here </formbox>
</div>
</div>
<div class="body">
<div class="body_main_page">Freelancer Text is here</div>
<div class="body_main_page">Employer text is here</div>
</div>
</div>
Thanks
Try to change your CSS like this:
.main {width:100%; padding:0; margin:0 auto; min-width: 1020px; overflow: hidden;}
.slider { background: transparent; margin:0 auto; padding:0; min-height:420px;}
.slider .gallery { margin:0 auto; width:980px; min-height:420px; padding:0;}
.formbox{ width: 48%; padding: 45px 60px 20px 0px; margin-top: 30px;background-color:#ffffff;
border:1px solid black;opacity:0.91;filter:alpha(opacity=91); /* For IE8 and earlier */
border-radius: 10px;margin-left: auto;margin-right: auto;}
.body { background: #bebebe; border-top: 0px solid; border-color: #e3e3e3; }
.body_main_page { width:470px; float:left; margin:0; padding:15px 10px;}
Don't provide a fixed height if you want to have e flexible height...
I'm using relative widths:
<style>
#ldiv {
height: 400px;
width: 75%;
background-color:#fff;
color:#ccc;
border: 1px solid #F2F2F2;
float: left;
}
#rdiv {
vertical-align: top;
float: left;
width: 25%;
}
</style>
<div>
<div id="ldiv">Left</div>
<div id="rdiv">Right</div>
</div>
With this code, #rdiv doesn't stay beside #ldiv.
If I use margin-right: -2px; in #ldiv, the two divs stay side by side, but overlap slightly.
I know the problem is caused by the border, but how can I make it fit?
write like this:
#ldiv {
height: 400px;
background-color:#fff;
color:#ccc;
border: 1px solid #F2F2F2;
overflow:hidden;
}
#rdiv {
vertical-align: top;
float: right;
width: 25%;
}
HTML
<div>
<div id="rdiv">Right</div>
<div id="ldiv">Left</div>
</div>
Check this http://jsfiddle.net/aYteE/
OR
You can use box-sizing property for this.
Check this http://jsfiddle.net/aYteE/2/
use a super div and position the inner divs with position:relative and float:left. Avoid giving width to the second div because border will make it go over "100%".
#container {
width:100%;
}
#ldiv {
height: 400px;
width: 75%;
position:relative;
float:left;
background-color:#fff;
color:#ccc;
border: 1px solid #F2F2F2;
float: left;
}
#rdiv {
vertical-align: top;
position:relative;
float:left;
}
<div id="container">
<div id="ldiv">Left</div>
<div id="rdiv">Right</div>
</div>
Hi I did small changes thats it. Friend please check it.
ldiv {
float:left;
height: 400px;
width: 75%;
background-color:#545149;
color:#ccc;
border: 1px solid #F2F2F2;}
rdiv {
float:left;
padding:10px 10px 10px 10px;
}