I have problem setting layout because one of my child divs makes goes out of it's parent div.
I have: header with 10% height, container with height 90%, and inside one 'div1' with height set to 90% and margin-top set to 10%. If I remove margin-top everything is ok, if not it goes out of parent size creating scrolls etc. (I want div1 height set, I dont need height set to auto etc.)
JsFiddle: https://jsfiddle.net/5q9vh93n/
HTML:
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
CSS:
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%;
}
#header
{
background-color: blue;
height: 10%;
}
#container
{
width: 100%;
height: 90%;
background-color: gray;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-top: 10%;
margin-left: 1.5%;
height: 90%;
}
#div2 {
background-color: green;
float: right;
width: 100px;
width: 43.17%;
margin-right: 3.6%;
}
Use Transform here is a demo
#div1 {
background-color: red;
float: left;
width: 15.67%;
transform: translateY(10%);
margin-left: 1.5%;
height: 90%;
}
you should use position: absolute; and change margin-top to top , margin-left to left. So css of #div as follow:
#div1 {
position: absolute;
background-color: red;
float: left;
width: 15.67%;
top: 10%;
left: 1.5%;
height: 90%;
}
I was really surprised when I've discovered this, but vertical padding and margin are relative to the parent's width, not height.
To solve your problem, you can use the top property instead, which is relative to the parent's height, as you expect.
So, just change your code to this, and it'll work.
#div1 {
top: 10%;
position: relative;
}
JSFiddle: https://jsfiddle.net/5q9vh93n/2/
Hope it helps!
Related
I have the following code:
.parent {width: 960px; display: table}
.1 {
width: 45%;
margin: 20px;
float: left;
height: 1000px; /* it can be smaller or bigger than this value to fit its content */
}
.2 {
width: 45%;
margin: 20px;
float: right;
height: 200px;
}
.3 {
width: 45%;
margin: 20px;
float: right;
}
<div class="parent">
<div class="1">1</div>
<div class="2">2</div>
<div class="3">3</div>
</div>
How do I write the CSS for class "3" so that its height automatically fill the remaining height of the table (in the case above, 720px, as the parent element will have, I assume, height of 1000px too)? Note that the height of class "1" can change according to its contents.
Off-topic: Is there a better way to make it look like the picture below other than the codes I'm using now (only using CSS and HTML)?
The Image of the Table
Try this one. the third element(green) will adjust based on the height of .one. But it is implemented based on the assumption that .two is having fixed dimensions.
.parent {
width: 960px;
border: solid 2px #999;
float: left;
position: relative;
}
.one {
width: 50%;
float: left;
height: 1000px;
background: #ccc;
}
.two {
width: 50%;
float: right;
height: 200px;
background: #aaa;
}
.three {
position: absolute;
top: 200px;
left: 50%;
right: 0;
bottom: 0;
background: green;
}
<div class='parent'>
<div class='one'>one</div>
<div class='two'>two</div>
<div class='three'>three</div>
</div>
I have simple layout and I'm trying to expand div's height to given % so I can put later scalled background img using backgound-size.
In example I wanna have div1 expand to 69%.
Why it doesn't work and how to fix it?
Link: https://jsfiddle.net/mc6ecstr/
CSS:
body
{
color: white;
margin: 0px;
padding: 0px;
height: 1080px;
}
#container
{
width: 100%;
height: 100%;
}
#header
{
background-color: blue;
width: 100%;
}
#div1 {
background-color: red;
float: left;
width: 15.67%;
margin-left: 1.5%;
height: 69%; /*doesnt work*/
}
#div2 {
background-color: green;
float: right;
width: 43.17%;
margin-right: 3.6%;
}
HTML:
<body>
<div id="header">Header</div>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>
</body>
You need to give to the body and html and to his parent (#container) height: 100%;
CSS
body, html
{
color: white;
margin: 0px;
padding: 0px;
height: 100%; /* Add this */
}
#container
{
width: 100%;
height: 100%; /* Add this */
}
DEMO HERE
If you know the height of #header you can use calc(...) and absolute positioning to make the container fill the remaining space:
#container
{
width: 100%;
height: 100%;
position:absolute;
top:20px;
left:0px;
height:calc(100% - 20px);
}
In this example I've set the header to a fixed height of 20px, then offset container by the same amount.
Then set #div1's height accordingly to fill 69% of #container.
Fiddle: https://jsfiddle.net/GarryPas/mc6ecstr/2/
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:
Please see the attached image,I want to design this in html,Quite successful.But when I test it on different resolutions the red box moves here and there.I made the design in 100% width and height 100%
<style type="text/css">
#green-box { width: 75%; background: green; float: left; position: relative; height: 100%; overflow: visible; position: relative; }
#blue-box { width: 25%; background: blue; float: left; height: 100%; }
#red-box {
position: relative;
top: 50px;
left:450px;
width: 357px;
background: red;
height: 207px;
margin:0 auto;
}
#green-box-content
{
margin:0 auto;
width:1600px;
height:800px;
}
</style>
<div id="container">
<div id="green-box">
<div id="green-box-content">
<p>Here is some text!</p>
<div id="red-box"></div>
</div>
</div>
<div id="blue-box">
</div>
<div style="clear: both"></div>
</div>
Part of the problem is in how you are trying to position the element. It looks like you want it to be centered between the blue and green, but you're positioning from the left-hand side. Once the width of the green changes, it won't be where you want it. It would be better to position from the right (the border between the two) and set right to -1/2 of the width.
Also, 100% height will only work if the parent containers have a set height
Here's the modified CSS, and a fiddle to demonstrate
#blue-box,
#green-box {
height: 300px;
}
#green-box {
position: relative;
width: 75%;
float: left;
background: green;
}
#blue-box {
width: 25%;
float: left;
background: blue;
}
#red-box {
position: absolute;
top: 50px;
right: -178px; /* width / 2 */
width: 357px;
height: 207px;
background: red;
}
Remove width and height from #green-box-content, works perfectly in my local.
#green-box-content
{
margin:0 auto;
}
check this after making the change in my local.
I think you should Percentage of the red box as you have used it for green and blue and position as absolute.
http://jsfiddle.net/ccEKk/
if I am wrong update the fiddle so that someone can help you with it
#red-box {
position: absolute;
top: 5%;
left:45%;
width: 35%;
background: red;
height: 20%;
margin:0 auto;
}
I am looking for a pure CSS way of having a container div automatically adjust it's width and height based on what content is inside it, for the purposes of centring the aforementioned content within another div.
I have tried setting the height and width to auto, but that doesn't help.
Any help you can offer would be much appreciated.
Thanks in advance.
The CSS:
.imageThumbnails {
position: relative;
margin: auto;
height: auto;
width: auto;
}
.imageThumbnailOne {
position: relative;
float: left;
height: 78px;
width: 91px;
background-image: url("thumbnail1.png");
}
.imageThumbnailTwo {
position: relative;
float: left;
height: 80px;
width: 76px;
background-image: url("thumbnail2.png");
margin-left: 29px;
}
.imageThumbnailThree {
position: relative;
float: left;
height: 76px;
width: 89px;
background-image: url("thumbnail3.png");
margin-left: 29px;
}
The HTML:
<div class="imageThumbnailsContainer">
<div class="imageThumbnails">
<div class="thumbnailOne"><a></a></div>
<div class="thumbnailTwo"><a></a></div>
<div class="thumbnailThree"><a></a></div>
</div>
</div>
You need to clear the .imageThumbnails div. You can do that with .imageThumbnails { overflow: hidden; } You can also remove the position: relative from everything.