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.
Related
i have two divs
first div : text-logo
.text-logo {
width: 250px;
height: 60px;
margin: auto;
border: 2px solid #07a2a0;
border-radius: 15px 50px 15px 50px;
margin-top: 100px;
}
<div class="text-logo"><h4>Just training/cit</h4></div>
second div : image-logo
.image-logo { overflow: hidden; height: 500px;}
.image-logo .left
{
float: left ;
width: 30%;
position: relative;
}
.image-logo .right
{
float: left;
width: 70%;
}
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
}
<div class="image-logo">
<div class="left">
<img src="images/logo.png">
</div>
<div class="right">
<h2>Being auomated much more easy than the manual things
</h2>
<hr>
</div>
i cant see the blue logo with the original size, the upper part of the logo is hidden ,
the picture will show you the problem
,
Try to add z-index
.image-logo .left img
{
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:2;
}
That's because the div .text-logo is above your logo div. You should change the z-index of one of them. It defines which element should be above another element. Use for your z-index a realistic value, to keep your code a bit cleaner.
.image-logo .left img {
width: 180px;
height: 180px;
position: relative;
bottom: 50px;
z-index:5;
}
Check that the element's color is not the same as the background color, as that will obviously make you not to see your element.
I have been a victim of this severally. Hope it helps someone.
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!
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}
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 have the following setup
Html:
<div id="resizable">
<div id="fixHeightTop">Whatever</div>
<div id="problematicDiv">Whatever</div>
<div id="semiProblematicDiv">Whatever</div>
<div id="fixHeightBottom">Whatever</div>
</div>
Css:
#resizable {
position: relative;
}
#fixHeightTop {
position: relative;
height: 10px;
}
#fixHeightBottom {
position: absolute;
height: 10px;
}
#problematicDiv {
position: relative;
float: left;
width: 80%;
overflow: auto;
}
#semiProblematicDiv {
position: relative;
float: right;
width: 20%;
overflow: auto;
}
The #resizable div is resizable (jQuery). What I need to do is to give to problematicDiv and semiProblematicDiv a height equal to 100% - fixHeightTop height - fixHeightBottom height so I can extend it on the full height of the resizable element. The problem is that I can't figure out a way to do it. If I use height: 100% it overlaps the bottom element.
Any ideas how to do that?
If I understood you right, you want to have two div with a fixed height and the two other divs show take up the rest of the height. If this is what you want, here is a way to do it.
#resizable {
height: 80px; //this is changed by JQuery, right?
}
#fixHeightTop {
height: 20px;
}
#fixHeightBottom {
height: 20px;
}
#problematicDiv {
position: relative;
float: left;
width: 80%;
overflow: auto;
height: 100%; //this helps the div taking up the space
}
#semiProblematicDiv {
position: relative;
float: right;
width: 20%;
overflow: auto;
height: 100%; //this helps the div taking up the space
}
i have an idea, try to use position:absolute;
#problematicDiv {
position: absolute;
top: 0px;
left: 0px;
width: 80%;
height: 100%; // Now you can apply height 100%
overflow: auto;
}
#semiProblematicDiv {
position: absolute;
top: 0px;
right: 0px;
width: 20%;
height: 100%; // Now you can apply height 100%
overflow: auto;
}
Good luck