I would like to set the 2-columns divs with the same height than container (without using px of course)
HTML
<body>
<div id="container">
<div id="hdr-lay">
Header
</div>
<div id="left-column">
Grid Layout left
</div>
<div id="right-column">
Grid Layout right
</div>
</div>
</body>
CSS
#hdr-lay {
_background-color: red;
}
#container {
background-color: gray;
height:100%;
width:100%;
}
#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
}
#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
}
http://jsfiddle.net/g3gxv4j2/
Perhaps it would be easier to do itwith no ?
I would like to set the 2-columns divs with the same height than
container
Since your container have height:100%, I assume you want the same for your child div's
Give 100% height to your html and body
html,body{
height:100%
}
You've set height:100% for your container. This will only extend its height to 100% of its content(which themselves are not getting 100% height). Let your left and right columns inherit height from their parent container.
#right-column {
float: left;
width: 30%;
background-color: blue;
display: block;
height:inherit;
}
#left-column {
float: left;
background-color: red;
border: 1px;
width: 70%;
height:inherit;
}
Here's the fiddle
Cheers!
This might be better :
#container {
display:flex;
flex-direction:row;
}
#left-column {
width: 30%;
background-color: blue;
}
#right-column {
background-color: red;
width: 70 %;
}
Related
I'm trying to set these divs to align like this:
but they end up either overlapping eachother (.title takes full width of container) or underneath eachother. Ideas?
.wrapper{
display: table;
float: left;
width: 1000px;
height: 200px;
}
.pic{
float: left;
width: 100%;
height: 20%;
}
.title{
width: 100%;
height: 20%;
}
.content{
width: 100%;
height: 20%;
}
.footer{
width: 100%;
height: 20%;
}
HTML:
<div class="wrapper">
<div class="pic"><img src="..."></div>
<div class="title"><p>title</p></div>
<div class="content"><p>lorem ipsum</p></div>
<div class="footer"></div>
</div>
JS FIDDLE: http://jsfiddle.net/mmb84836/
As per the Best Practice:
Put Pic in one Box and the other three Boxes on right in one Box and use "float:left or **display:inline-block**for those.
Here is the code for the same:
HTML
<div class="wrapper">
<div class="leftBox">
<div class="pic">pic</div>
</div>
<div class="rightBox">
<div class="title">title</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
</div>
CSS
div {
border:1px solid #000;
}
.wrapper {
display: block; /*Default Property - You Can Remove Also*/
width: 1000px;
height: 200px;
}
.leftBox {
float:left;
width :20%;
height:100%
}
.rightBox {
width :79.5%;
float:left;
height:100%
}
.pic {
width: 100%;
height: 100%;
}
.title {
width: 100%;
height: 20%;
}
.content {
width: 100%;
height: 20%;
}
.footer {
width: 100%;
height: 20%;
}
Here is the Working Fiddle: http://jsfiddle.net/7xLyc3q1/
You've got a lot of answers here, but none of them explain what is actually happening here. When using float, there's something important you need to understand: floated elements are lifted out of the box model and have effectively zero width and height as far as other elements are concerned. There is a workaround for this: by specifying overflow:hidden in the parent element, floated elements will no longer "collapse".
Here's an example that demonstrates this. Notice that the title, content, and footer have a width:100%, and they're only filling the space that is remaining for them -- this is probably what you'd expect to happen. Notice also that there was no need to float them to the right... they take the space that's left.
Try adding float: right to .title, .content, and .footer.
Also it may be worth considering using Foundation or Twitter Bootstrap. Both have grid systems so this would guarantee the divs would resize to fit any size screen.
<div class="wrap">
<div class="pic">pic</div>
<div class="other">oth1</div>
<div class="other">oth2</div>
<div class="other">oth3</div>
</div>
.wrap { width:100; height:200px; }
.pic { float:left; width:29%; height:100%; margin-right:1%; background-color:red; }
.other { float:left; width:70%; height:32%; margin-bottom:0.5%; background-color:green; }
and jsfiddle http://jsfiddle.net/t85kz39a/
Here is one way of doing it if you can specify a width for the image. I assumed that the image would be 200px wide in this demo.
Try the following CSS:
.wrapper{
width: 600px;
height: 200px;
padding-left: 200px;
border: 1px dashed gray;
}
.pic{
float: left;
width: 190px;
margin-left: -200px;
border: 1px dashed blue;
}
.pic img {
display: block;
}
.title{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.content{
width: auto;
height: 20%;
border: 1px dotted blue;
}
.footer{
width: auto;
height: 20%;
border: 1px dotted blue;
}
The trick is to open up a space to place the image. Add a 200px wide left padding to
the .wrapper.
The padding will force .title, .content and .footer to align 200px from the edge
of the wrapper.
For .pic, set the width to 200px (or smaller) and set the left margin to -200px to move
it into the padding area.
Finally, set the correct width for .wrapper, 600px. The overall width of .wrapper
will compute to 800px (600px width + 200px left padding - -200px left margin from the
float).
See demo: http://jsfiddle.net/audetwebdesign/mgg1stmc/
The main benefit of this approach is that you don't need to add any other wrapping
elements. (If you use floats, the extra wrappers are necessary.)
There's a much simpler css-only way without changing your HTML structure:
Demo http://jsfiddle.net/bfhng3a9/
All you need:
.wrapper {
overflow:auto;
text-align:center;
}
.pic {
float: left;
width:20%;
}
.title, .content, .footer {
width:80%;
float:right;
clear: right;
}
You can use this code and it is working according to your design.
Live Working Demo
HTML Code:
<div class="wrapper">
<div class="pic"><img src="..."/></div>
<div class="title"><p>Title</p></div>
<div class="content"><p>Content</p></div>
<div class="footer"><p>Footer</p></div>
</div>
CSS Code:
.wrapper{
position: relative;
float: left;
width: 1000px;
height: 200px;
border: 1px solid #000000;
}
.pic{
float: left;
width: 300px;
height: 200px;
background-color: red;
position: relative;
}
.title{
width: 650px;
height: 60px;
background-color: green;
position: relative;
left: 350px;
top:-16px;
}
.content{
width: 650px;
height: 60px;
background-color: blue;
position: relative;
left: 350px;
top: -22px;
}
.footer{
width: 650px;
height: 60px;
background-color: gold;
position: relative;
left: 350px;
top: -28px;
}
Result:
Is there a possibility to put an image on the middle of a page?
BUT: On the right side and the left side of the image, there are 2 areas that can grow according to the screen resolution.
These areas are "1 pixel repeat-x" images.
Please note: the image on the right side and the left side aren't the same picture!
Below a picture with a sketch that (I hope) will explain my problem:
You can do it like this
Set the image in .container where for now I have added sample text.
CSS
.rightArea,
.leftArea {
position: absolute;
width: 50%;
background: yellow;
top:0;
left:0;
height: 100%;
}
.rightArea {
background: red;
right: 0;
left: auto;
}
Here is one way of building this layout using CSS table cells.
Start with this HTML:
<div class="wrapper">
<div class="left"></div>
<div class="center">
<img src="http://placekitten.com/400/200">
</div>
<div class="right"></div>
</div>
and apply the following CSS:
.wrapper {
display: table;
width: 100%;
border: 1px solid blue;
}
.left, .center, .right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
}
.center {
width: 1%;
}
.left, .right {
width: 50%;
}
.left {
background-image: url(http://placekitten.com/4/100);
background-repeat: repeat-x;
background-position: left center;
}
.right {
background-image: url(http://placekitten.com/10/100);
background-repeat: repeat-x;
background-position: left center;
}
.center img {
display: block;
}
The .wrapper has a width of 100%, so it fills the width of the page.
The child elements .left, .center and .right are table cells.
.center is forced to shrink-to-fit the image by setting the width to some small value, for example, 1%.
The .left and .right elements are set to the same width, 50%, which forces them to take up the remaining space equally.
You can apply background images as needed to any of the child elements.
See demo at: http://jsfiddle.net/audetwebdesign/pG2v3/
Note: Most modern browsers support CSS table cells.
You can relay on a single container and pseudo-elements.DEMO
display:table/table-cell -properties will make this easy to manage: (update test with your image name/path)
HTML
<div>
<img src="middle.jpg" />
</div>
CSS
img {
display:block;/* avoid gap underneath*/
margin:auto;/*optionnal*/
}
div {
display:table;
width:100%;
background:#7E858F;
}
div:before, div:after {
content:' ';
display:table-cell;
width:50%;/* will shrink to leave room for image */
background-repeat:repeat-x;
}
div:before {
background-image:url(left.jpg);/* slice of 1px */
}
div:after {
background-image:url(right.jpg);/* slice of 1px */
}
DEMO
To freely grow sided placed divs, keeping a content in the middle, use a wrapper display: table; element, and set the inner divs to display:table-cell, so the center element will adjust according to the width of the right and left divs:
http://jsfiddle.net/4uHm8/
HTML:
<div class='wrapper'>
<div class='left'></div>
<div class='center'>test</div>
<div class='right'></div>
</div>
CSS:
.wrapper {
display: table;
width: 100%;
height: 200px;
}
.wrapper > div {
display: table-cell;
}
.left {
width: 30px;
background: red;
}
.right {
width: 50px;
background: blue;
}
EDIT:
In the same line of thought, if you set only the central div's width, the left and right divs will adjust themselves equally using the remaining width... even zero.
http://jsfiddle.net/4uHm8/1/
.wrapper {
display: table;
width: 100%;
height: 200px;
}
.wrapper > div {
display: table-cell;
}
.center {
background: blue;
width: 100px;
}
.left, .right {
background: red;
}
HTML
<div class="main">
<div class="left"> </div>
<div class="image">
<img src="http://www.ricoh.com/r_dc/r/r8/img/sample_10.jpg" height="150" width="120" alt="image" />
</div>
<div class="right"> </div>
</div>
CSS
.main {
width: 100%;
margin: 0 auto;
position: relative;
}
.left {
float: left;
width: 50%;
background: #FF0000;
}
.right {
float: right;
width: 50%;
background: #FFFF00;
}
.image {
position: absolute;
}
jQuery
$(document).ready(function () {
$(".image").css('right', ($(".main").width() / 2) - ($(".image").width() / 2));
$(window).resize(function() {
$(".image").css('right', ($(".main").width() / 2) - ($(".image").width() / 2));
});
});
Example
http://jsfiddle.net/wphn9/
Could someone please have a look at my jsfiddle and see if you can make the red div vertically align in the middle and get the red div to be centred as well. You will have to make the div that contains the red div a certain height
jsFiddle
<div class="container">
<div class="row1">
<div>
<div style="height:200px; width:725px; background-color:red; margin:0px auto">A</div>
</div>
<div></div>
</div>
<div class="row2">
<div>B</div>
<div>C</div>
</div>
</div>
html, body {
height:100%; margin:0px; padding:0px
}
.container {
width: 100%;
height: 100%;
display:table;
position: relative;
}
.row1 {
display:table-row;
max-height: 425px;
background: pink;
}
.row1 div {
display:table-cell;
width:100%;
}
.row2 {
display:table-row;
height: 100%;
}
.row2 div {
width: 100%;
height: 100%;
float:left;
background: green;
}
.row2 div + div {
background: aqua;
width: 50%;
height: 100%;
position: absolute;
top:0;
right:0;
}
#media (max-width: 1024px) {
.row1 {
width: 100%;
}
.row1 div + div {
display: none;
}
.row2 div + div {
width:50%
}
.row2 div {
width: 50%;
}
.row2 div + div {
position: static;
}
}
Just a small change makes your table-cell rule apply only to the immediate children of what you're calling table-row: .row1 > div instead of .row1 div. See the update: http://jsfiddle.net/Xgr3k/11/
This fixes your problem except now your aqua colored div is popping up whenever your width > 1024. That's happening because of your media query and setting that div to position: static. Which I'm not sure you want to do. But, basically, be careful about how your rules cascade down your DOM. Good luck :)
An example of my code can be found on JSFiddle http://jsfiddle.net/WdZgV/
CSS
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.header_div {
display: inline-block;
width: 100%;
text-align: center;
}
.header {
display: inline-block;
height: 100px;
width: 100%;
max-width: 1000px;
background: #ddd;
}
.logo {
float: left;
width: 200px;
height: 100px;
background: #bbb;
}
.menu {
float: left;
width: 800px;
height: 100px;
background: #999;
}
</style>
HTML
<div class="header_div">
<div class="header">
<div class="logo"></div>
<div class="menu"></div>
</div>
</div>
What i want is that when you resize the window width to less than 1000px the .menu div resize to the size of the parent div.
So as an example:
If you have your window width as 900px, the .logo div has 200px and the .menu div has 700px.
Is there anyway i can do this with CSS, or i need to use Javascript?
Yes — remove the float, don't specify width, and set overflow to hidden. Example here; .menu becomes:
.menu {
height: 100px;
background: #999;
overflow: hidden;
}
#Andoni Roy Use this
.logo {
float: left;
width: 200px;
height: 100px;
background: #bbb;
}
.menu {
float:right;
overflow:hidden;
height: 100px;
background: #999;
}
You may not want to play with floating properties but specifying the parent width and display to table.
Like in the following example: http://jsfiddle.net/A8zLY/745/
You would end up having something like:
HTML
<div class="header_div">
<div class="header">
<div class="logo"></div>
<div class="menu"></div>
</div>
</div>
CSS
.header_div {
width: 1280px;
}
.header {
display: table;
}
.logo {
display: table-cell;
width: 280px;
}
.menu {
display: table-cell;
width: 1000px;
}
You could specify width in percentages.
I have been struggling with this for awhile now, and I can't seem to find any solution.
I have a frame, a top box, a left box and a right box and a middle box containing the last two.
I want these to be the height of the frame minus the height of the top box. This would result in the frame being filled, nothing more and nothing left.
What is wrong with my current code, and what would be a proper way to achieve this?
Here's the code:
<html>
<head>
<style type="text/css">
#frame {
width: 800px;
min-height: 500px;
border: 1px solid black;
}
#top {
width: 800px;
height: 80px;
float: left;
background-color: #666;
}
#middle {
width: 800px;
height: 100%;
float: left;
}
#left {
width: 200px;
height: 100%;
float: left;
background-color: #B3B4BD;
}
#right {
width: 600px;
height: 100%;
float: left;
background-color: #99BC99;
}
</style>
</head>
<body>
<div id="frame">
<div id="top">Top</div>
<div id="middle">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
</div>
</body>
</html>
You can't specify a 100% height unless you explicitly set the parent's height. The reason is that the parent normally expands in height to fit its children, and you need to specify an exact height so that the parent knows what its height is in time for its children to need it.
That said, there are a number of ways of achieving a similar effect. For instance if one div is normally taller than the other then you can use absolute positioning to stretch the second div to the same height. Or if you're really desperate then you can use a table.
Try using proportions instead of exact pixels.
#frame {
width: 80%;
min-height: 500px;
border: 1px solid black;
margin-right:auto;
margin-left:auto;
}
#top {
width: 100%;
height: 80px;
float: left;
background-color: #666;
}
#middle {
width: 100%;
height: 100%;
float: left;
}
#left {
width: 33%;
height: 100%;
float: left;
background-color: #B3B4BD;
}
#right {
width: 66%;
height: 100%;
float: left;
background-color: #99BC99;
}
jsFiddle
Here's a screenshot of your demo with the updated CSS: