Basically i have:
<div class="wrap">
<div class="sum">
little text
</div>
<div class="content">
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
long<br/>
text
</div>
</div>
<style>
.wrap{
height:100%;
overflow:hidden;
background:green;
}
.sum{
float:left;
height:100%;
background:yellow;
}
.content{
float:left;
height:100%;
background:red;
}
</style>
If you see, the sum div doesn't expand to the remaining height to equal to the content div.
All i want is both divs be in the same height without specifying it.
I totally need a Pure css, and not javascript or table.
Thanks
This might be a better option for you...
http://bonrouge.com/2c-hf-fixed.php
or check out faux columns:
http://www.alistapart.com/articles/fauxcolumns/
Related
If someone used a flexbox with 2 items that take up as much space available both will take equal parts of the container. I'm working with a sliding component(Ionic2) that translates one of the boxes(say the left one) over the other(right one) and I'd like to shrink the other based on the final position of the translated box(so that possible inner flex items can resize accordingly). Here's a codepen .
<h1>Both parts take up the same space.</h1>
<div class="container">
<div class="item1">
</div>
<div class="item2">
</div>
</div>
<br>
<h1>They still take up the same space, but the red overlaps the blue.</h1>
<div class="container">
<div class="item3">
</div>
<div class="item4">
</div>
</div>
And the corresponding css
.container{
width:1000px;
height:100px;
background-color:gray;
display:flex;
}
.item1{
height:100%;
width:100%;
background-color:red;
}
.item2{
height:100%;
width:100%;
background-color:blue;
}
.item3{
height:100%;
width:100%;
background-color:red;
transform:translate3d(100px,0,0);
}
.item4{
height:100%;
width:100%;
background-color:blue;
}
Is it possible without having to transform the second box?
This is what I have done till now.
<div style="overflow:visible;width:1050px;border:1px solid green;height:50px;margin-left:115px">
<div style="border:1px solid red;position:absolute;width:730px;">
<br/><br/><br/>
<div class=''><div class='tagstyle'>FRESHER</div><div class='tagstyle'>IT JOBS</div><div class='tagstyle'>2013</div><div class='tagstyle'>BANGALORE</div></div>
<!----- left --->
<div>
<div style="border:1px solid blue;height:900px;position:absolute;width:340px;margin-left:735px;">
<!------ right --->
<div>
</div>
Problem is, right side div going downward, when left side div has any content.
Aha! Saw your edit now! It's really simple with some css3 table display properties, but that doesn't work in old browsers.
However, you could use some simple css to make a standard blog template with sidebar, header and main content:
<style>
.body-wrapper {
position:absolute;
top:20px;
left:50%;
width:900px;
margin-left:-450px; /* Half the width (negative) */
background:red;
}
.header {
position:relative;
width:100%;
height:100px;
margin-bottom:10px;
background:blue;
}
.main {
float:left;
width:70%;
background:green;
}
.sidebar {
float:right;
width:30%;
background:yellow;
}
</style>
<div class="body-wrapper">
<div class="header">
Header!
</div>
<div class="main">
Content!
</div>
<div class="sidebar">
Sidebar!
</div>
</div>
Here is a jsFiddle as proof: http://jsfiddle.net/Kepk9/
Hope it helps!
Another answer!
If you just would like to position divs after each other, you could set them to display:inline-block, like this:
<style>
.inline {
display:inline-block;
}
</style>
<div class="inline">
Labalodado
<br/>multiline content
</div>
<div class="inline">
Less content
</div>
<div class="inline">
Another div
<br/>with
<br/>multiline content
</div>
The reason why your code doesn't work is really simple actually. I made some other answers first because I think that they are a better approach.
position:absolute doesn't automatically move the item to {0,0}
You have to set top:0px by yourself.
Oh.. and there are some mistakes in your code too, but just go with one of my other too answers and you'll be fine :)
I've got a set of side by side divs (actually using HTML5 sections but I'm assuming the solution and behavior is just the same). They sit in a container with the right side holding form fields and left side a summary title and information. The structure looks something like this:
<div id="container">
<div id="left" >Summary here</div>
<div id="right">Form fields here</div>
</div>
The catch is I have to hide or show various fields depending on actions taken with javascript so the actual height of the right side and container are not static. What I need is to get the left side to fill the height of the container so it will match the right. I've tried the numerous solutions on the internet but none seem to be working.
Thanks in advance!
This is a very common question. Take a look at this article... it has all the answers:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Now, here's a quick fiddle of putting that to use. Try clicking on any of the "Column #" text elements to remove them from the document... the columns will resize nicely :)
http://jsfiddle.net/UnsungHero97/qUT3d/9/
HTML
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
CSS
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
I have a wrapper. Inside that wrapper I have 3 divs. I would like #contentOne standing above #contentTwo and contentThree standing on the right side of those two. I am sure someone can help. Thank you in advance for your replies. Cheers. Marc. (This positioning thing is killing me....)
http://jsfiddle.net/Qmrpu/
My HTML:
<div id="wrapper">
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
<div id="contentThree" class="content">contentThree</div>
</div>
My CSS:
#wrapper{
width:430px;
float:left;
height:auto;
border:2px solid blue;}
.content{
border:1px solid black;
background-color:yellow;
width:200px;
height:100px;}
#contentThree{
height:130px;}
Can you put them in floated column wrappers?
<div id="wrapper">
<div id="column1" class="column">
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
</div>
<div id="column2" class="column">
<div id="contentThree" class="content">contentThree</div>
</div>
</div>
CSS:
.column {
float: left;
}
http://jsfiddle.net/xbcxs/
That's how I would've done it. Notice the position:relative on the wrapper div and position:absolute; right:0; on the third div.
http://jsfiddle.net/remibreton/7javg/
HTML is lacking in providing functions for vertical positioning. They are getting better with newer display values, but you need to limit your audience to only modern browsers. Barring that you need to change the order of the HTML to get the vertical position you want. In this case if you put the 3rd section at the top and gave it a float:right you get what you are after.
http://jsfiddle.net/Qmrpu/1/
Why not use a table for layout?
http://jsfiddle.net/Qmrpu/3/
try this:
<div id="wrapper">
<div id="contentThree" class="content">contentThree</div>
<div id="contentOne" class="content">contentOne</div>
<div id="contentTwo" class="content">contentTwo</div>
</div>
#wrapper{
width:430px;
float:left;
height:auto;
border:2px solid blue;}
.content{
border:1px solid black;
background-color:yellow;
width:200px;
height:100px;}
#contentThree{
height:130px;
float: right;
}
I have div with position absolute and I want to put another div under.
The two divs have diffrent widths.
The div above is with position absolute and is centered. The div that should be at the bottom has 100% width.
How to make that?
Thanks!
make one div that contains both
use float:right
example:
div#p8015buttons {
position:absolute;
bottom:0.5em;
right:0.5em;
width:90px;
}
div.p8015 {
float:right;
margin:1px;
}
Wrap both DIVs in a third one and position that one absolute instead of the original one.
Not tested, but this should do it.
HTML:
<div class="wrapper">
<div class="one">
Content
</div>
<div class="two">
More content
</div>
</div>
And the CSS:
.wrapper
{
position:absolute;
width: 500px;
height: 400px;/*whatever you want*/
}
.one,
.two
{
position:relative; /*or static*/
}
Hope it helps :)
Tested
HTML MARKUP
<div class="wrapper">
<div class="left-ontent>
</div>
<div class="right-ontent>
</div>
</div>
CSS
.wrapper{width:980px;margin:0 auto;position:absolute;}
.left-content{float:left;width:630px;}
.right-content{float:right;width:320px;}
Try this one, you can then move style to your css
<div style="width:500px; margin: auto; height:200px; background-color:black;">
</div>
<div style="width:100%; height:200px; background-color:green;">
</div>