This question already has answers here:
Make absolute positioned div expand parent div height
(15 answers)
Closed 4 years ago.
The <div> container shrinks to, well, "zero" after positioning my logo.
Could you please check what's the problem? I'd like it to be centered in the #logo <div>. I thought making parent <div> relative and children absolute should keep logo in the <div>.
Html
<body>
<div class="wrapper">
<header>
<div id="logo">
<img src="./img/logo.png">
</div>
</header>
</div>
</body>
CSS
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding:0;
margin:0;
background-color: #DCB894;
}
.wrapper{
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
}
header {
margin-top: 10px;
background-color: #BCD34C;
}
#logo{
border-style: solid;
border-color: magenta;
border-width: 2px;
position: relative;
height: auto;
}
#logo img {
width: 150px;
height: auto;
position: absolute;
margin: auto;
border-style: solid;
border-color: red;
border-width: 2px;
}
Yes it should to behave something like that because position: absolute and position: fixed dose not take place from it's parent or container. When you use these two css properties they go outside regular document follow. That's why parent treat inside have no content and height not auto increase until set you height by explicitly by css properties like height: 100px (for example) or min-height: 100px (for example).
According your current structure either you set the minimum height based logo.
header {
min-height: 100px; // 100px here logo size assumed
}
Or keep the position of logo image relative:
#logo img {
position: relative;
}
I would avoid position absolute, if you wrap your image within a div you can centre your image.
body{
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding:0;
margin:0;
background-color: #DCB894;
}
.wrapper{
margin-right: auto;
margin-left: auto;
max-width: 960px;
padding-right: 10px;
padding-left: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
}
header {
margin-top: 10px;
background-color: #BCD34C;
}
#logo{
border-style: solid;
border-color: magenta;
border-width: 2px;
position: relative;
height: auto;
max-width: 220px;
overflow: hidden;
}
#logo figure {
width:52%;
margin: 0 auto;
}
#logo img {
width: 100%;
position:relative;
border-style: solid;
border-color: red;
border-width: 2px;
overflow: hidden
}
<body>
<div class="wrapper">
<header>
<div id="logo">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/en/9/9d/Pepsilogo.png">
</figure>
</div>
</header>
</div>
</body>
The img will take up 100% of the total space, given to it by the figure.
You can change the width of the figure and then the image will respond, keeping it centered.
Related
What I am trying to accomplish is to get the image block to the center of the banner. What's happening is the left edge of the image is what's in the center. How would I get the actual center of the image to the center of the banner? I hope this makes sense... lol.
Here is what I am currently getting:
This is what I am trying to get... you can ignore the differences in fonts, borders, etc.. lol
This is my css:
#profile-banner {
background: #000;
height: 267px;
border-bottom: 1px solid #999;
margin: 0px 0px 25px 0px;
text-align: center;
}
#profile-banner h1 {
font-size: 36px;
font-family: Piximisa;
letter-spacing: 5px;
padding: 15px;
margin: 0px;
}
#profile-banner p {
margin: 0px;
padding: 0px;
}
#profile-banner .logo {
top: 125px;
background: #333;
border: 1px solid #666;
width: 250px;
height: 250px;
position: absolute;
margin: 0 auto;
padding: 0px;
}
This is my HTML:
<div id="profile-banner">
<h1>Some Team Name</h1>
<p>
Some catchy slogan.
</p>
<img src="{BLANK-LOGO}" alt="" border="0" class="logo">
</div>
Thanks for your time!
You can't mix absolute and static positioning. You can use absolute positioning:
position: absolute;
top: 125px;
left: 50%;
margin-left: -125px;
or static positioning:
margin: 125px auto 0;
The main difference is how the element affects other elements. Using absolute positioning takes the element out of the document flow, so it doesn't affect other elements.
Change your CSS this way
#profile-banner .logo {
margin: 125px auto 0;
background: #333;
border: 1px solid #666;
width: 250px;
height: 250px;
padding: 0px;
}
Changes
Remove position and top.
Add the top as margin-top.
Positioned elements do not respect margins.
Hi I have page http://rygol.cz/qlife/ and when Iam zooming out the content goes out of his div. If i you height: auto; or height: 100% its ok but leftcolumn is smaller then right, clear doesnt help me.
Have anybody some idea how to fix it?
#leftcolumn {
color: #333;
background: #fff;
background-image:url("./images/corner.png");
background-repeat:no-repeat;
padding: 10px;
height: 800px;
width: 244px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
background: #fff;
padding: 10px;
height: 800px;
width: 638px;
display: inline;
margin-bottom: 10px;
}
If you need that extra space between header and the content you should just go ahead and place the #leftcolumn and #rightcolumn in an additional wrapper container with the background-color set and have the #container without the background-color set.
HTML structure:
<div id="container">
<div id="header"></div>
<div id="content-wrapper">
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
</div>
</div>
And CSS:
#container {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
background: #fff;
width: 902px;
padding: 10px;
margin-bottom: 10px;
height: 200px;
}
#content-wrapper {
background-color: #fff;
min-height: 1px;
overflow: hidden; /* clear hack :) */
}
#leftcolumn {
color: #333;
background: #fff;
background-image: url("./images/corner.png");
background-repeat: no-repeat;
padding: 10px;
width: 244px;
float: left;
}
#rightcolumn {
float: right;
color: #333;
background: #fff;
padding: 10px;
width: 638px;
margin-bottom: 10px;
}
Remove the height declarations in the columns. You could also use overflow-y: scroll though I would stick to removing the heights. Another thing to consider is that people generally don't zoom out that far anyway: the text becomes impossible to read at the zoom level it breaks at (chrome v24).
If you want equal height columns have the shorter column floated to one side then set position: relative and top: 0; bottom: 0; then set the other column to have overflow: hidden; to 'clear' the float. Note: the floated column should come first in the markup for this to work.
I am trying to figure out the correct way to make a div class inherit the parent div height so that when I do for example, padding-top: 100% , it puts the element at 100% of the parent div.
Here's my code:
CSS
#globalContainer{
margin: 0px auto;
width: 100%;
height: 100%;
}
#header-out{
width: 100%;
background-color: black;
}
#header{
width: 940px; /* Set to % when possible */
height: 240px; /* Set to % when possible */
margin: 0px auto;
background-color: white;
}
#header .title{
position: relative;
float: left;
padding-top: 100%;
}
HTML:
<body>
<div id="globalContainer">
<div id="header-out">
<div id="header">
<div class="title">Test</div>
</div>
</div>
</div>
</body>
At the moment, my Test appears at the very bottom of the page inside of the bottom of my header...
Thanks !
EDIT: I am now trying to add a logo next to my title, I used this code:
#header .title{
position: relative;
float: left;
top: 50%;
left: 2.5%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
#header .logo{
position: relative;
float: left;
top: 50%;
width: 250px;
height: 100px;
border-style: solid;
border-width: 1px;
}
Problem is, it overlaps my title, starting where my title would end if I did not use the left: 2.5%
I tried to remove the float: left, it doesn't change anything...
Anyone can help on this ?
Hi i am having trouble trying to get my child div expand to the height of the parent div that it is inside of.
Here is the css for the parent div
#wrapper #content {
border: 1px ridge #999;
height: auto;
min-height: 1000px;
width: 1100px;
margin-top: 40px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
float: left;
}
And here is the css for the child div
.tab_container {
clear: both;
width: 100%;
border-right: 1px ridge #999;
margin-bottom: 20px;
height: 100%;
}
Any ideas what i can do?
You can do it with the folowing style: (Inspired by this question: CSS - Expand float child DIV height to parent's height)
#content {
border: 1px ridge #999;
height: auto;
min-height: 1000px;
width: 1100px;
margin-top: 40px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
float: left;
position: relative; /* added */
width: 100%; /* added */
}
.tab_container {
border: 1px ridge orange; /* added */
clear: both;
width: 100%;
border-right: 1px ridge #999;
margin-bottom: 20px;
height: 100%;
position: absolute; /* added */
}
Fiddle here
You have margin-bottom set on both elements. With the child having a bottom margin, it will always be smaller by that amount. Removing the margin-bottom style might bring it a little closer.
You can do it with jQuery. Please check the example code below.
<html>
<head>
<title>Auto Height in jQuery</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
var height = $("#content").height();
$(".tab_container").height(height);
});
</script>
<style type="text/css">
#wrapper #content {
border: 1px ridge #999;
height: auto;
min-height: 1000px;
width: 1100px;
margin-top: 40px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
float: left;
}
.tab_container {
clear: both;
width: 100%;
border-right: 1px ridge #999;
height: 100%;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div class="tab_container">Tab Container</div>
</div>
</div>
</body>
</html>
The height of the parent is auto. The 100% of the child results in it also being defined as auto, and auto results in size to content.
You can try adding a fixed height to the parent which might work or put enough content in the child to stretch it; that will work.
So I'm trying to add a badge to the top right corner of a site I'm doing some work on. z-index works to float the object above the page content but each time i try to use position relative the background image disappears only position absolute shows the image. I don't really want to use absolute as the image needs to be positioned on the right hand side of the sites menu bar not the right hand side of the viewport.
Any thoughts or advice appreciated
<div class="badge-box">
Book Now!
</div>
<div id="header">
<img src="images/pixel.gif" width="378" height="31" alt="Welcome to Gwynfryn Farm Cottages" />
</div>
<div id="main-menu">
<div>
Home
Our Cottages
Bed & Breakfast
Price Guide
Location & Local Attractions
News & Special Offers
Contact Us
</div>
</div>
.badge-box {
width: 1030px;
margin-left: auto;
margin-right: auto;
border: 0px solid red;
}
.badge {
background: url(../images/badge.png) 0px 0px no-repeat;
width: 148px;
height: 148px;
text-indent: -10000px;
position: relative;
z-index: 999;
}
#header {
width: 960px;
height: 40px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
padding: 20px 0px 0px 20px;
background: #58564f url(../images/header-top-background.png);
}
#main-menu {
width: 980px;
margin-left: auto;
margin-right: auto;
height: 35px;
/*background: red;*/
background: #58564f url(../images/header-bottom-background.png);
font-family: Georgia, "Times New Roman", Times, serif;
}
#main-menu div {
width: 776px;
height: 35px;
margin-left: auto;
margin-right: auto;
background: blue;
}
#main-menu div a {
display: block;
float: left;
padding: 5px 10px 0px 10px;
height: 30px;
color: #FFFFFF;
font-size: 1.2em;
text-align: center;
background: green;
}
#main-menu div a:hover {
background-color: #333333;
}
unless you do a display:block on that .badge class, a lot of the styles you have defined won't take effect as it defaults to inline. maybe that is all you need to get started.
i am not sure what is the effect you are trying to achieve. can you post a png/jpeg of the mock-up?