I have two div elements inside one div element. These two div elements are both 50% wide and other one is floated to left and the other is floated to right. The right floated div contains one high picture (in different heights) and left floated div contains text. On the left div these texts are separated into three different sized rows and the whole left div should be as high as the right div. How am I able to do this using only CSS? Here's my example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
}
.container {
width: 100%;
height: 100%;
overflow: auto;
background: #FF0;
}
.left {
float: left;
width: 50%;
background: #F0F;
}
.left .first {
height: 20%;
}
.left .second {
height: 50%;
}
.left .third {
height: 30%;
}
.right {
float: right;
width: 50%;
}
.right img {
display: block;
max-width: 100%;
}
p {
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</body>
</html>
The short answer is that you can kind of do this, but I don't think it will behave the way you expect.
You would have to declare explicit heights for the two <div>'s -
.left, .right {
height: 100px /*or whatever height you want*/;
}
If this is a static page, and the image never changes, you can manually enter the pixel amount.
If the picture is going to change, and you don't know what the height is going to be, you cannot get the left div to match the height of the right div using plain CSS.
There are ways to fake it (see the faux columns technique), but you cannot programmatically get one div to change it's height to match another one.
There are ways to do this with JavaScript, but I'm not going to get into them because you asked about CSS (and I hate using JS to manipulate layout like that - it's very unreliable).
Also: if your containing div, .container, collapses, it's because you need to either float it, or apply a clearfix technique.
There are a few things you need to do:
You need to float the containers.
You need to add an extra container and nest the divs in the following order:
<div class="container2">
<div class="container">
<div class="left">
<div class="first">
<p>First</p>
</div>
<div class="second">
<p>Second</p>
</div>
<div class="third">
<p>Third</p>
</div>
</div>
<div class="right">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Centara_Grand_Hotel.jpg" alt="" />
</div>
</div>
</div>
Then you need to relative position your containers and move them to the right. After that, you'll move your content divs from the left.
For your CSS:
.container {
width: 100%;
float: left;
position: relative;
right: 50%;
}
.container2 {
width: 100%;
float: left;
overflow:hidden;
position:relative;
}
.left {
float: left;
width: 50%;
left: 50%;
position: relative;
background: #F0F;
}
.right {
float: left;
width: 50%;
left: 50%;
position: relative;
}
Please see this page if you're having difficulties.
Related
I want to have an avatar image with two divs on its right that are vertically aligned to it.
https://jsbin.com/qafiroquve/1/edit?html,css,output
I've read so many posts about this, but none of them seems to help me.
What is the best approach to having the image on the left with 30% of the main div's (header) width, and the info div with 70% of it?
If either of the info divs (name or position) has too much text, I want the info div to get vertically aligned to the image on its left.
I also want this info div to have a margin with the image.
I've tried so many options: float: left on avatar div, display: inline-block on both avatar and info, width: 30% and 40% . I don't want to use bootstrap for this purpose as it complicates things and I want to keep it as simple as possible.
You can use either table-cell how #w3debugger suggested or you can take advantage of a quick css hack to align vertically:
.yourclass{
position:absolute;
top: 50%;
transform: translateY(-50%)
}
But that needs the parent of .yourclass to be position:relative and be of type display:block; If your parent is block it will take the height of the block that is inside it, so the avatar, that is next to .yourclass needs to be display:block as well,
I edited your example:
HTML:
<div class="header">
<div class="avatar">
<img src="http://i.imgur.com/pBcut2e.jpg" />
</div><div class="info">
<div class="name">Important person here </div>
<div class="position">CHIEF DIGITAL STRATEGIST & CO-FOUNDER</div>
</div>
</div>
CSS:
.header {
width: 500px;
background: aqua;
margin: 0 auto;
padding: 10px;
position: relative;
}
.avatar img {
width: 30%;
border-radius: 50%;
}
.info{
box-sizing: border-box;
padding: 0 40px;
width: 70%;
position:absolute;
right: 0;
vertical-align: top;
top: 50%;
transform: translateY(-50%)
}
Live preview:
https://jsbin.com/gogewefizo/1/edit?html,css,output
Unfortunately, vertical-align didn't work with float elements. You should use display: table-cell or `display: inline-block in order to meet your requirements.
Please check the code below.
.header {
width: 500px;
background: aqua;
margin: 0 auto;
padding: 10px;
display: table;
}
.avatar img {
width: 150px;
}
.avatar,
.info {
display: table-cell;
vertical-align: middle;
}
<div class="header">
<div class="avatar">
<img src="http://i.imgur.com/pBcut2e.jpg" />
</div>
<div class="info">
<div class="name">Important person here</div>
<div class="position">CHIEF DIGITAL STRATEGIST & CO-FOUNDER</div>
</div>
</div>
I have the following layout to build:
Basically, I need three divs of varying height with varying header heights to be positioned 100% from the top of their parent, minus the height of the header. I could do this with jQuery, but this is a responsive site, so I'd like to keep it as CSS-based as possible (otherwise I'll have to deal with $(window).resize(), which in my experience can be unreliable).
Is this possible, maybe using the CSS3 calc feature?
Thanks.
So you can try add content (orange container) stick to the bottom off the blue container (depends of your html structure you can use position: absolute , or margin-top in orange container).
Than you can put header (green) container inside orange container and put it position absolute top -100% (orange position has to be absolute or relatve).
If you will add your html than it will be easy to find more precise solution.
JSFIDDLE with an example
CSS:
.box{
background: #f00;
height: 150px;
width: 100%;
position: relative;
padding: 20px;
padding-bottom: 0;
}
.column{
background: #0f0;
width: 30%;
position: relative;
top: 100%
}
.header{
position: absolute;
bottom: 100%;
width: 100%;
background: #00f;
}
HTML:
<div class="box">
<div class="column">
<div class="header">
header
</div>
aaaaaaa<br/>
aaaaaa
</div>
</div>
I have this solution (works for any number of columns as long as they fit):
Use inline blocks to center align the results
Use relative positioning to align the blocks with the bottom of blue box (requires top vertical align)
Move the green blocks out of the flow by making them absolute position (this leaves orange box in the flow which aligns with the bottom of blue box)
body {
font: medium monospace;
}
.blue {
background: #AAF;
height: 12em;
text-align: center;
}
.helper {
display: inline-block;
width: 10em;
vertical-align: top;
position: relative;
top: 100%;
}
.green {
background: #CFC;
position: absolute;
bottom: 100%;
left: 0;
right: 0;
}
.orange {
background: #FCA;
}
<div class="blue">
<div class="helper">
<div class="green">
1<br/>2
</div>
<div class="orange">
1<br/>2<br/>3
</div>
</div>
<div class="helper">
<div class="green">
1<br/>2<br/>3
</div>
<div class="orange">
1<br/>2<br/>3<br/>4<br/>5
</div>
</div>
<div class="helper">
<div class="green">
1
</div>
<div class="orange">
1<br/>2<br/>3<br/>4
</div>
</div>
</div>
Try the following CSS rule: height: calc(100% - header_height);
I'm trying to make a floating div have a height that fills in the parent div.
http://jsfiddle.net/sergep/2qPZ2/1/
The structure is as follows:
Parent div______________________
| Middle child
| Left child - float:left
| Right child - float:right
The problem is that the left child has less text than the right, meaning the right increases the height of the parent div (to fit the div), but the left floating div does not follow suit.
The css looks like so:
.bottomcontainer {
bottom: 0;
position: absolute;
width: 100%;
height: auto;
}
.bottomleft {
background: #346CA5;
float:left;
width: 50%;
}
.middle {
background: #FFCE3C;
}
.bottomright {
background: #65B237;
float:right;
width: 50%;
}
How can I make the blue .bottomleft class stick to the bottom of the .bottomcontainer? - I'm trying to make responsive, so I don't want to use actual pixel sizes!
Consequently, how do I make the text inside vertically align middle?
Use display:table-cell; on the child divs, see here for an example that can be extrapolated
I misunderstood the question. You can fix that by adding an extra div around .bottomleft and .bottomright and display it as table / tablecells:
HTML:
<div id="nav"></div>
<div id="container">
<div class="bottomcontainer">
<div class="middle">
<h2>Intro tag line here</h2>
</div>
<div class="bottom">
<div class="bottomleft">
<h2>Tag line here</h2>
</div>
<div class="bottomright">
<h2>Longer tag line goes here</h2>
</div>
</div>
</div>
</div>
<div name="content" id="content"></div>
CSS:
.bottom {
display: table;
}
.bottomleft {
display: table-cell;
background: #346CA5;
opacity: 1.0;
width: 50%;
vertical-align: middle;
}
.bottomright {
display: table-cell;
background: #65B237;
opacity: 1.0;
width: 50%;
}
And updated Fiddle 2
Delete the float, and add an absolute positioning:
.bottomleft {
background: #346CA5;
opacity: 1.0;
position: absolute;
bottom: 0;
width: 50%;
vertical-align: middle;
}
Also check the updated Fiddle.
I didn't find an answer for this specific case of mine, so I decided to ask a new question. I want to have 2 DIVs on the left side of the page (with a fixed width) and a single DIV on the right side, occupying the rest of the page width. Also the single DIV on the right should have its independent height (when its height is increased it shouldn't affect the height or position of the DIVs on the left). Something like this is what I want:
This is the HTML code:
<body>
<div class="div1">Div1</div>
<div class="div3">Div3</div>
<div class="div2">Div2</div>
</body>
This is the CSS I have right now:
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
}
div.div3 {
height: 425px;
overflow: hidden;
}
div.div2 {
clear: left;
float: left;
height: 15px;
margin-top: 10px;
}
The only problem is that Div2 top position is affected by the height of Div3 and I get something like this:
Try this:
<html>
<head>
<style>
div.div1 {
float: left;
height: 400px;
margin-right: 10px;
width: 200px;
background-color: blue;
}
div.div2 {
clear: left;
float: left;
height: 15px;
width: 200px;
margin-top: 10px;
background-color: red;
}
div.div3 {
height: 425px;
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="div1">Div1</div>
<div class="div2">Div2</div>
<div class="div3">Div3</div>
</body>
</html>
Once I re-ordered the Divs and added a width for Div 2 it works fine
https://jsfiddle.net/6g7qx26b/
This also works if you replace the css height properties with min-height properties, allowing for greater flexibility. Widths may also be specified in percentages
now you can use the right content with overflow:hidden and not conflicting with the left divs.
Check this:
http://jsfiddle.net/6UyTr/1/
div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }
Check it on http://jsfiddle.net/cz2fP/
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
Grouping the left div element by another div element.
div.div1 {
height: 400px;
margin-right: 10px;
width: 200px;
background: red;
float: left;
}
div.div3 {
height: 15px;
margin-top: 10px;
margin-right: 10px;
background: green;
clear: both;
width: 200px;
}
div.div2 {
height: 425px;
overflow: hidden;
background: blue;
float: left;
width: 200px;
}
<div style="float:left;">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
And see this link http://jsfiddle.net/bipin_kumar/cz2fP/3/
<style>
div.left{
float: left;
}
.main{
width : 100%;
}
.clear{
clear : both;
}
div.div1, div.div2 {
margin-right: 10px;
width: 200px;
background: red;
}
div.div1 {
height: 400px;
}
</style>
<body>
<div class="main">
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
<div class="clear"></div>
</div>
</body>
http://jsfiddle.net/rkpatel/qd6Af/1/
I needed something similar, just mirrored (1 div left, 2 divs right) and I couldn't work it out. A few Google searches later, I found a website which easily allows you to create a grid, assign number of rows/columns to differently named divs and it even gives you the HTML/CSS code to just copy and paste it. I didn't know about this and wasted a good hour on trying various other ways, so if you didn't know about this website yet, here it is.
Sorry for replying to such an old thread, I just want to help people.
Try this
<body>
<div class="left">
<div class="div1">Div1</div>
<div class="div2">Div2</div>
</div>
<div class="div3">Div3</div>
</body>
DEMO
<div class="main">
<div class="div1">
<div class="div2"></div>
<div class=="div3"></div>
</div>
<div class="div4"></div>
</div>
and in css use min-height property
.div1 {
float:left;
}
.div4 {
float:right;
}
.main {
min-height:200px;
}
I new to webdesign and I wonder how I could do something like this:
..........................
LEFT --- CENTER ---- RIGHT
..........................
Its one parent div in the center of the window, with 3 divs inside like columns. I want them to be dynamic, so they always scale to the browser window.
This is how it looks now.
My current HTML:
<div id="container_m">
<div id="left">
<p>My name is Barnabas</p>
</div>
<div id="right">
<p>Till salu</p>
</div>
<div id="center">
<p>Senaste nytt</p>
</div>
</div>
My currrent CSS:
#container_m
{
position:absolute;
height: 40%;
width: 60%;
left: 20%;
top: 45%;
background-color:rgba(0,0,0,0.2);
}
#left
{
position: relative;
height: 100%;
width: 33%;
float: left;
background-color: blue;
}
#right
{
position: relative;
height: 100%;
width: 33%;
float: right;
background-color: green;
}
#center
{
position: relative;
height: 100%;
width: 33%;
margin:0 auto;
background-color: yellow;
}
Floating divs can sometimes ruin the auto-resize of the parent div. What I do to ensure proper auto-resize of the parent div is to add this to parent div, just behind the last floating child:
<div style="clear: both;"></div>
This may be a dirty fix or whatever but it ensures the parent div always resizes along with its children.
whats wrong with that? I'm resizing my browser and they seem to be getting bigger and smaller. if you are talking about the fact they're not all inline then you need to do this:
<div id="parent">
<div id="left">
Left Content
</div>
<div id="center">
Center Content
</div>
<div id="right">
Right Content
</div>
</div>
And then float them all left. :)
You can simplify that hugely: http://www.jsfiddle.net/fsnuh/
HTML:
ids not needed on each child, as on your website, they are styled identically. classes attached below purely for the colored backgrounds
<div id="container_m">
<div class="red">
<p>My name is Barnabas</p>
</div>
<div class="yellow">
<p>Till salu</p>
</div>
<div class="green">
<p>Senaste nytt</p>
</div>
</div>
CSS
Styles for left, right and center combined into one. Overuse of position: relative removed.
#container_m
{
position: absolute;
height: 40%;
width: 60%;
left: 20%;
top: 45%;
background-color:rgba(0,0,0,0.2);
}
#container_m div
{
height: 100%;
width: 33.33%;
float: left;
}
.red
{
background-color: red;
}
.green
{
background-color: green;
}
.yellow
{
background-color: yellow;
}