html code
<body>
<div id="container">
<div id="left">
<h2>rerererere</h2>
</div>
<div id="right">
<h2>sdadsad</h2>
</div>
</div>
</body>
CSS file
div#container {
position: relative;
border: 1px solid #000;
}
#left {
position: absolute;
width: 480px;
height: 480px;
border: 1px solid #0092ef;
/* blue*/
}
#right {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
width: 250px;
border: 1px solid #783201;
/* brown*/
}
when I only use right div as absolute than there is no problem . But when I use absolute in both left and right div. right div becomes as small as line. I am new to css . So this might be a noob question . Why if I put two absolute div under a relative div does not work ? Please help me out.
Your right <div> collapses because you haven't declared a fixed height for it in your CSS, that's all.
Your right div has no height.
Here is a jsfiddle with your right div with a height
Your right div has no height specified which is why it collapses to the line height.
Plus remove bottom: 10px; on the right div as this is redundant as there is a top value already specified.
Related
Hi
I want to place the div2 top align with the div1's border
So far I have tried this for div 2 but it did not work out well
element.style {
float: right;
position: relative;
vertical-align: top;
}
this did not align the div at top position , what could be the fix to make it top aligned?
I would achieve this using position: absolute; on the child like said before, but instead of adding an additional div to the DOM to simulate use the space , I would use a pseudo-element (more precisely, the ::before pseudo-element).
This is the structure I used for it:
<div class="parent">
<div class="child">
</div>
<h1>Start</h1>
</div>
The div with class parent needs to be position: relative;, and the child needs to be absolute to it and set to be top: 0; like the following lines explain:
.child {
position: absolute;
top: 0;
width: 100%;
height: 100px;
background-color: #000;
}
You will though need to set this element a fixed height and width, otherwise it will not work.
The problem of this approach is that you will have a div that will be over the first 100px of your .parent div.
To solve this we need to create a pseudo-element on the .parent div that will simulate that space and make everything work better:
.parent:before {
display: block;
content: ' ';
width: 100%;
height: 100px;
}
Here's a working fiddle with a sample code, hope this helps you!
http://jsfiddle.net/m54rxwjv/2/
PS: This will only work if you know that the height will always be 100px.
Give position relative to your parent div and position absolute to inner div. Don't forget to set top:0px for inner div and after this your inner div will be always at the top of your parent div.
#div1{position:relative;}
#div2{position:absolute;top:0px;}
As per Vipul's answer, I have create code snipped on jsfiddle for same behaviour:
http://jsfiddle.net/zo6jdp4b/1/
I have put one extra div on the top also so that one do not have any issue in child Div css:
.childDiv{
border: 1px solid blue;
height: 10px;
width: 30px;
position:absolute;
top: 0px;
}
Set your top div inside another div with sticky.
Like:
.div2 {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
It should be placed as your div2 in your div1 element in which you have (for example) overflow-y: scroll on a set height (and bellow content to be vertically scrolled).
.div1{
box-sizing: border-box;
border: 3px solid red;
height: 150px;
width: 30px;
}
.div2{
box-sizing: border-box;
border: 3px solid green;
margin: -3px;
height: 30px;
width: 30px;
}
<div class="div1">
<div class="div2"></div>
</div>
.div1{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
}
.div2{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
position:relative;
top:0;
left:0;
}
div2 always at the top
I need to define a div that is preceded by any number of elements with arbitrary height, but it should fill the remaining space until the bottom of the fold.
The way I thought about doing this is to position the top with relative and the bottom with absolute, but I'm not sure if that's even possible in CSS.
#header {
border: 1px solid green;
width: 100%;
height: 100px;
}
#fill-the-fold {
border: 1px solid red;
position: absolute;
height: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div id="header"></div>
<div id="fill-the-fold"></div>
Basically, I want the red container to start below the green and fill the space to the bottom of the page.
Any help on how to accomplish that, or if there's any easier way to go about it, much appreciated.
This is answered here.
In short - use flexbox if you can. Key items:
you'll need a flexbox wrapper around your 2 divs, with flex-direction: column
add flex-grow: 1 to #fill-the-fold.
Another possibility I couldn't see mentioned in the link above is to oversize the second div and chop off the bottom with a wrapper - fiddle. This is obviously only good when you don't mind losing the bottom of your second div.
You can reach your purpose by applying margin trick.
JSFiddle
HTML:
<div id="header"></div>
<div id="fill-the-fold">
<div id="content">
</div>
</div>
CSS:
html,body{ margin:0px; height:100%;}
div{
box-sizing: border-box;
}
#header {
border: 1px solid green;
width: 100%;
height: 100px;
}
#fill-the-fold {
margin-top: -100px; /* shifting it covers head */
padding-top: 100px; /* shifting the content under the head */
height: 100%;
}
#content{
border: 1px solid red;
height: 100%;
}
Append your red-border part after the head, and shifting it by negative margin. Then write your real content in the inner one.
I am trying to vertically align the text in a floated div to the bottom but it doesn't seem to work. Here is what I currently have:
<div class="header_left">TEXT</div>
CSS:
.header_left {
width: 50%;
text-align: left;
float: left;
vertical-align: bottom;
border-bottom: 1px solid #666;
}
I need the div to be floated as I want to place 2 divs side by side but I cannot seem to make the text go to the bottom of the div.
Working DEMO
You need to have 2 divs to achieve this with relative and absolute position.
<div id="container">
<div id="content">Bottom Content</div>
</div>
#container
{
position: relative;
height: 200px;
background-color: #eee;
}
#content
{
position: absolute;
bottom: 0;
}
http://jsfiddle.net/2Z6tA/1/
<div class="header_left">
<span id="bottom">Text at bottom</span>
</div>
CSS:-
.header_left {
width: 50%;
text-align: left;
float: left;
vertical-align: bottom;
border-bottom: 1px solid #666;
height:100px;
position: relative;
}
span#bottom{
position: absolute;
bottom: 0;
}
Another thing to try if you dont want a div container, set a margin top & bottom. For example:
.header_left {
margin-top:50%
margin-bottom:50%
}
You'll have to tinker with the measurements, 50% isn't always the amount to use. I used 9% to vertically align a floating :before image on a button on a mobile site I was working on.
I'm sure this has been asked before but I'd really like to know why this is doing what's it's doing rather than just the answer (if there is one).
What I've got is a pretty simple layout at the moment, which consists of a main wrapper div, a header div, a content div and a footer div. The problem I'm having is when I come to place a number of squares within the content div and set their positioning to absolute - so as to lay them out in a grid so that they span the entire width of the content div. When I set these divs to absolute the footer div jumps up and does not appear below the grid of divs sitting in their parent content div. If I set the height of the content div to a value the footer div sits where it should, but if I don't or set it to auto (as I want to do) then the footer div sits effectively below the content div.
I have read that setting anything to absolute takes it out of the normal flow of the document, but is there anyway I can set the content div so that the height of the content div is set by the contents (ie the grid of divs) and also so that the footer div always sits below the content div?
Here is a mock up http://jsfiddle.net/M4jyH/3/
And here is my code
#wrapper {
width: 400px;
height: auto;
border: 1px solid #000;
margin: 10px auto;
padding: 10px;
}
#header {
width: 100%;
height: 50px;
border: 1px solid #000;
}
#content {
position: relative;
width: 100%;
/*height:92px;*/
border: 1px solid #000;
margin: 10px 0px 0px 0px;
}
.box {
position: absolute;
width: 92px;
height: 92px;
background-color: #999;
}
#footer {
position: relative;
width: 100%;
height:92px;
border: 1px solid #000;
margin: 10px 0px 0px 0px;
}
<div id="wrapper">
<div id="header">header</div>
<div id="content">
<div class="box" style="top:0px; left:0px;"></div>
<div class="box" style="top:0px; left:102px;"></div>
<div class="box" style="top:0px; left:205px;"></div>
<div class="box" style="top:0px; left:308px;"></div>
</div>
<div id="footer">footer</div>
</div>
You don't need to use position: absolute for the inner elements, to position them horizontally just use float: left with margin for spacing. You will still get a similar collapsing height going on with regard to the content region - because again floats are partially taken out of the content flow. However, this is easily fixed by applying overflow: hidden to the content area.
I've added first and last classes to your box elements, just to make handling margins easier:
<div id="content">
<div class="box first"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box last"></div>
</div>
I've also altered your css items as follows:
#content {
overflow: hidden; /* <-- added overflow hidden */
position: relative;
width: 100%;
outline: 1px solid #000;
margin: 10px 0px 0px 0px;
}
.box {
float: left; /* <-- replaced pos abs with float left */
margin-right: 10.5px; /* <-- added a specific margin */
width: 92px;
height: 92px;
background-color: #999;
}
.box.last {
margin-right: 0px;
}
With regards to using 10.5px for the margin, it is probably best if you re-evaluate the dimensions used so this is not necessary. However most modern browsers will handle this correctly.
http://jsfiddle.net/M4jyH/5/
position: absolute should really only be used for items that you specifically want taken out of the document flow and to not interfere with anything else.
I have a wrapper with border radius. Inside the wrapper I have a absolute positioned image in the top right corner. My problem is that the image doesn't crop/hide under the wrapper with border radius. I've tried overflow:hidden on the wrapper but it doesn't work. See image below.
Image tag is not affected by border-radius.
Your best bet is to use the picture as a background like:
<div id="someimage" style="background:url('image.jpg');border-radius: 5px; height: 200px; width: 500px;"></div>
The element(in above example a div) should contain the size of the actual image), and unless you use CSS3, the image cannot be resized like <img> tag
You could use a separate absolutely positioned <div> for the border so that you can place the border above your absolutely positioned image. For example:
<div id="wrapper">
<div id="inner">
<img id="i" width="75" height="75" src="http://placekitten.com/75/75">
</div>
<div id="border"></div>
</div>
And some CSS (WebKit border radius properties only, the rest are left as an exercise for the reader):
#wrapper {
position: relative;
}
#inner {
margin: 2px; /* Make room for the border */
width: 200px;
height: 200px;
position: relative;
}
#border {
-webkit-border-radius: 5px;
border: 2px solid black;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
#i {
position: absolute;
top: 0;
right: 0;
}
And the usual example: http://jsfiddle.net/ambiguous/6e622/
The <div id="border"> is certainly a hack (and I feel a bit dirty for coming up with it) but maybe it will work for you.