How to position a div horizontally?
I used "Float:left" that works. what i need is , want to position that div based on a value( like margin) that value is the distance between the outer divs and inner div that is illustrated in image
I used the margin-left but it compares the distance between the previous child ,instead of the parent(outer div)
I tried the "left" $(area).css(left: LeftVal); that is also not working as expected. In my case I cant use the offset too.
How to achieve this ?
Note: The 100pxs in the image is for a example, i might use different values.
Set the positions as follows :
parent(container) {position:relative;}
child1 {position:absolute;left:100px;top:0;}
You can use position:absolute to position elements absolutely with respect to the parent.
<style>
.outer {
background: blue;
width: 200px;
height: 200px;
position: relative;
}
.inner {
position: absolute;
float: left;
background: red;
height: 200px;
}
.inner1 {
margin-left: 20px;
}
.inner2 {
margin-left: 120px;
}
</style>
<div class="outer">
<div class="inner inner1">Inner1</div>
<div class="inner inner2">Inner2</div>
</div>
You can choose not to use float if you don't want the div to resize based on the content. Instead, you could set the width manually for each div.
Related
Here is the jsfiddle to illustrate my question.
I have a floated div with no height (.card). It contains a nested div (.image) with an image. The image makes the bounding box of .card expand to wrap the image.
However, when I nest a second div (.text) inside .card as a sibling to .image and use negative margin-top to position .text in top of the image, the image no longer manages to expand the bounding-box of .card to match the bottom of the image. The bottom-boundary of .card instead creeps up and follows the bottom boundary of .text.
Why does not the image succeed in expanding its grand-parent any longer when .text is present?
<div class="card">
<div class="image">
<img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div>
</div>
<div class="card">
<div class="image">
<img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div>
<div class="text"></div>
</div>
img {
display: block;
}
.card {
border: 1px solid black; //shows where the bounding-box of this div is
width: 200px;
position: relative;
float: left;
}
.text {
width: 100px;
height: 100px;
background-color: red;
margin-top: -120px;
position: relative;
}
If m not wrong to get your point then you are missing position:absolute.
Remember you can fix position of inside element only when parent div is relative and inside element absolute.
UPDATED
This issue is occurring because you are trying to use .txt(child) inside .card(parent) with position relative but with wrong way. Remember whenever you are using position, parent should be relative and child will be absolute so child will move inside parent container without breaking the flow(in your case it is affecting the parent div and breaking the border) so to over come this issue use position:absolute on child and then you can use .txt class with ease.
Just change position: relative; to position: absolute; in .text class and you are done.
See here
I was just wondering if there is any difference between using it in different ways and what is the point of using it around a relative position wrap -- especially if the main target is the top property? Can someone tell me what is the main purpose(s) of using it around a relative position wrap, like in what cases it is important to do so?
Here is something that I was trying and I find no difference between using absolute position under a relative and under a static position -- I mean when it comes to "top" property.
<head>
<style>
#box_1 {
position: static;
width: 200px;
height: 100px;
background: yellow;
}
#box_2 {
position: relative;
width: 700px;
height: 60px;
background: red; left:300px;
}
#box_3 {
position: absolute;
width: 700px;
height: 60px;
background: black; left:200px; top: 300px;
}
#box_4 {
position: absolute;
width: 700px;
height: 60px;
background: green; left:200px; top: 300px;
}
</style>
</head>
<body>
<div id="box_1">
<div id="box_2">
<div id="box_3">
</div>
</div>
<div id="box_4">
</div>
</div>
</body>
If you don't wrap an absolute positioned element around a relatively positioned object, in your viewport, top will be top, but if you zoom in or zoom out, it will be top of the viewport and independent of your layout, weather in case of relatively positioned objects, if an absolute positioned object is wrapped around a relatively postioned object, it will be on top under the bounds of the relatively positioned object(s).
For Instance,
Let us take three div tags as mentioned in the question with ids, box_1, box_2 and box_3
Let us assume the below CSS and HTML for the three div's
The CSS:
#box_1 {
position: static;
width: 200px;
height: 100px;
background: yellow;
top:0px; left:0px;
}
#box_2 {
position: relative;
width: 1000px;
height: 100px;
background: red;
}
#box_3 {
position: absolute;
width: 200px;
height: 100px;
background: black; right:0px; top: 0px;
}
The HTML:
<div id="box_2">
<div id="box_1"></div>
<div id="box_3"></div>
</div>
From the above example, you can see that box_2 being a relatively positioned div is taken as a parent and wrapped around the box_1 and box_3 as absolute and static positions respectively. What happens, is that when the relatively positioned div is wrapped around the absolute and static positioned divs, the inner child wrap around the parent div and generate positions relative to their parent.
WORKING DEMO
If we change the HTML as below,
<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>
As now, all the divs are independent are are parent in itself, so what will happen is that all the div will behave according to their characteristics. for instance, the absolutely positioned div will be independent of its origin i.e the viewport and shall move left, right, top and bottom independent of origin and not according to the bounds of relatively positioned div as in the first scenario. Same goes for static and relative div which will behave according to their characteristics.
WORKING DEMO
I hope this helps.
An object positioned absolutely within a static wrapper will be positioned based on the viewport (or closest absolutely/relatively positioned parent).
An object positioned absolutely within an absolute or relative wrapper will be positioned based on the wrapper.
I have a parent div, and 2 child divs. I want [child 2] to be centered in the parent. And I want [child 1] to hang over the left side of the parent. If I I give [child 1] a position of absolute, I can make the child left-hang outside of the container. However, [child 2] is still vertically displaced by the height of [child 1].
[c1][ [c2] ]
I've worked up an example in this jsFiddle. Any insight is appreciated.
Thanks
Tim
Your .slide-left-overhang (which is child 1, right?) has position: relative. Set it to position: absolute and it won't interfere anymore.
Other notes:
.slide-container-content has a width that is greater than its containing element - set it to 100% or whatever width you want the text to be, and then set your margin autos.
You set a bunch of <p> tags inside of an <h4> - I'm not sure what you plan to do with that, but it's semantically troubling.
here, see my update (minor tweaks) of yours: http://jsfiddle.net/Ye5us/
Use this structure:
HTML
<div class="div_container">
<div class="div_left">
</div>
<div class="div_right">
<div class="div_right_content">
</div>
</div>
</div>
CSS
div {
position: relative;
height: 200px;
background: yellow;
}
.div_container {
width: 500px;
margin: 0px auto;
}
.div_left {
width: 200px;
float: left;
}
.div_right {
width: 300px;
float: right;
background: blue;
}
.div_right_content {
margin: 0px auto;
width: 100px;
background: red;
}
jsFiddle: http://jsfiddle.net/Xk7fP/1/
I have three columns on a webpage. One at the left hand side. Other at the center and the last one at the right hand side. I want to shift the right div below the left div (and left div is an expandable div).
But the problem is that the right div and the center div have the same parent div. And the left div and the parent of right and center div have the same parent. This is what I mean to say-
<container>
<leftContainer>
<leftColumn>
<mainContent>
<rightColumn>
<centerColumn>
And I want to shift the <rightColumn> below the <leftColumn>. Is it possible ?
Also since I am working on a custom user stylesheet, I cannot change the code, I can only modify the CSS.
How do I do this ?
If you know the height of the left div, you can float: left each div and then use a negative margin-height on the centerColumn of the height of the left column.
Example: <-- click for a demo
<div id="container">
<div id="left_container">
<div id="left">left</div>
</div>
<div id="right_container">
<div id="right">right</div>
<div id="middle">middle</div>
</div>
</div>
<style type="text/css">
#container {
width: 160px;
}
#left {
float: left;
width: 80px;
height: 100px;
background-color: #eee;
}
#right {
clear: left;
float: left;
width: 80px;
height: 100px;
background-color: #ccc;
}
#middle {
float: right;
width: 80px;
height: 100px;
margin-top: -100px;
background-color: #aaa;
}
</style>
I don't believe this is possible with an "easy" fix. You can think of divs as boxes, and what you're trying to do is to keep the center column to the right of the left column while putting the right column below (which would distort the box).
There is a fix where you can make the rightColumn position absolute and set the position of the column relative to the window itself. However, I don't suggest you do this. Instead, you should probably modify the css and put the right column in the same parent div as the left column.
Yo. There's a tendency in placing divs to follow each other vertically, but what i'm trying to accomplish right now is to is basically to place a number of divs (two) inside a parent div like so:
<div id='parent'><div id='onediv'></div> <div id='anotherone'></div> </div>
And i'd like to place 'anotherone' just to the right of 'onediv'. Sadly, float:right is pretty much ruining the layout with the divs popping out of their parent divs and whatnot. Any suggestions are welcome.
Edit: It might be worth noting that the parent div and 'anotherone' has no height elements at all, with 'onediv' planned to be thought as the "height support" div, allowing the contents of 'anotherone' to make the parent div larger at will.
Edit again: Here's the CSS for the specified stuff:
.parent
{
width: 90%;
margin: 0 auto;
border:solid black 1px;
}
.firstchild
{
width: 20%;
margin: 5px;
border: solid black 1px;
height: 180px;
}
.secondchild
{
width: 60%;
border:solid black 1px;
margin: 5px;
}
You can float both inner divs and give the outer div an overflow so that it grows with the inner divs.
Example:
#parent {
overflow: hidden;
}
#parent div {
width: 50%;
float: left;
}
Try this:
<div id="parent">
<div id="onediv" style="float:left;"></div>
<div id="anotherone" style="float:left;"></div>
<div style="clear:both;"></div>
</div>
I think this is what you want (note the re-ordering of DOM elements):
<div id="parent">
<div id="anotherone"></div>
<div id="onediv"></div>
</div>
/*CSS*/
#anotherone{
float:right;
width:50%;
}
#onediv{
float:left;
width:50%;
}
Note, if this is what you want, IE6 will still mess it up. ;-)
You certainly need to specify a width as indicated in #Kevin's answer to get the layout you described, simply specifying float left/right will not have the desired effect. Try specifying the width in pixels rather than a percentage. Failing that or if that's not appropriate for you, I think you possibly need to specify the width of the outer div (through css if you like).
#onediv { float: left; width: 50%; } #anotherone { float: right; width: 50%; }
Just use the <span> tag. Its the equivalent of except it doesn't start a new row.