I'm working on some complex design and have a silly question once again :)
Well, let's say I have a div and some content inside, like:
<div style="background-color: #fff; width: 1000px; margin: 0 auto;">
<img src="img.png" />
<p>Blablabla :)</p>
</div>
<div style="background-color: #000; width: 1000px; margin: 0 auto;"></div>
Div's width is fixed, but I don't tell the browser what's the height (so there's no height property of div in css file).
And then, when I add more and more text the first paragraph or bigger image, the text-child of first div is in the second div.
How to prevent this from happening? Or what did I to make it happen?
Thanks!
Make sure that the parent divs are not position:absolute; or position:fixed; in the CSS. They should be position:relative;.
If any child items are float:left; or float:right; then the reective parent div needs an overflow:auto; property inorder to cause the div to fully wrap the child items.
It'd help us help you more if you posted a whole sample of a working page, not just the divs, and the CSS as well.
It should be auto-expanding, it sounds like you have some other styling with positioning that's throwing the default behavior off.
You can see in a demo here that it should expand (height: auto;) to whatever content you give it, dynamically added or not.
I would check for floats and positioning on the img and p. But I cant tell you more without seeing the full css/html can you post a link?
Related
I have a div with height:auto;
I do see that it will resize based on some elements. It does resize with just plain text for instance.
However, if i set a child div with specified size, the parent height:auto; div will not resize to fit around that child div.
So i was wandering if maybe changing the Display type would help? (no luck so far though).
Thanks
EDIT:
There are no floats inside the parent div, if not absolute elements are considered float?
The parent div is position:relative;
and the child div is absolute.
When i tried to use overflow:auto; on the parent div, scroll bars appeared on the parent div instead if making it bigger when needed.
Thanks for the replies!
<div style="height: auto; position:relative">
<div style="height: 50px; position:absolute;">ALOHA</div>
</div>
It sounds like your child DIV or content is floated. On its own, height: auto; will not scale around this as it doesn't recognise floats as a part of the regular document order.
Your best solution is probably to use overflow: auto; on your parent DIV.
Alternatively, if floats are responsible, your parent DIV will also wrap around floated content if you apply a float to the parent itself. This may not be ideal, though, because this will affect its placement - so overflow: auto; is most likely better.
If you can provide any examples of your code, I'm sure someone can give you a more specific example.
If you mean something like
<div style="height: auto">
<div style="height: 50px">ALOHA</div>
</div>
It will fix the parent.
Div doesn't fill parent div, but if you'll change your structure like thi:
<div style="height: auto">
foo bar foo bar<div style="height: 200px">heya</div>
<div class="clear" style="clear: both"></div>
</DIV>
height:auto will works.
edited ;)
<div id="logo" style="center"><img src="logo1.png"></img></div><br><br><br><br><br><br><br></div>
This doesn't work.
Whats the problem with the style of the div? i'm sure the syntax is wrong.
"center" is not a style. You're probably looking for text-align: center.
Images are self-closing like the line-break. You don't use </img>.
You have a spare closing </div> at the end of the line. One of them needs removed, I'm not sure which spot you want it in.
<div id="logo" style="text-align: center"><img src="logo1.png"></div><br><br><br><br><br><br><br>
you cannot define style in div like that instead you can define the div property in css and call the class or id of the css.
Best way to center a element is probably to specify its width and put the side margin to auto:
If for example your logo1.png is 570px wide, you would do something like this in the css
#logo{
margin:0px;
margin-left:auto;
margin-right:auto;
width:570px;
}
Try this. You have to set the width of a div as shown below in order for it to work. To specify that the text inside the div is centered, simply apply style="text-align: center"
<div id="logo" style="margin-left: auto; margin-right: auto; width: 500px; border: 1px solid #ff0000">Your content here....</div>
Note: set 500px width to your desired width. Also, remove border: directive. I just added that so you could see the DIV was centered.
fiddle
I having a hard time with my CSS min-height, I have two divs and they are side by said, if one of them expands, I would like the other to expand http://www.willruppelglass.com/
As you can see the leftSideBar stops expanding at its min-height and the content div is expanded past its min-height.
CSS
.leftSideBar{
background:url(../images/leftSide.jpg) repeat-y;
float:left;
margin-top: -49px;
min-height: 591px;
}
.contentWrapper{
background-color:#ebebeb;
width:1411px;
margin:0 auto;
position:relative;
}
.content{
background:#FFF;
width: 1100px;
margin:0 auto;
position:relative;
min-height: 591px;
}
HTML
<div class="contentWrapper">
<div class="content">
<div class="leftSideBar">
<img src="images/leftSideTop.jpg" width="170" height="78" border="0" />
</div><!--leftSideBar-->
</div><!--content-->
</div><!--contentWrapper-->
The reason this is happening is because the content in the content div is pushing past the minimum height but the left nav not actually having content has no reason to get bigger.
My suggestion, even though it is not strictly CSS, I would use a simple piece of jQuery (because I noticed you are already using it) that will dynamically adjust the CSS property of the left div to match the right div. The jQuery version is here:
var div_height = $("#content").height();
$(".leftsidebar").css("height":div_height);
Please note that I have used an ID on the content that doesn't exist in your existing code so you will need to assign an ID to that div to work.
I hope this helps.
You have the first area floating left. Whenever you use float it can act different in various browsers, so I avoid that sort of stuff at all costs for main elements.
If you want your divs to be independent of each other, don't nest them. Better yet, control the positioning yourself using css properties such as "display" and "position". Once you get your divs separated from interacting with each other you'll find you have much more control over them individually.
I need a child div to be as high as its parent, but I do not know the parent's height. It can change.
Setting "height: 100%" does not work, as the div will take the height of the entire page.
This is the layout of the divs:
<div id="deelnemersballoon">
<div class="balloonarrow"></div>
<div class="balloonborder">
<div class="ballooncontent">
<div id="aantaldeelnemers">1</div>
<div id="deelnemertekst">deelnemer werd toegevoegd.</div>
<div class="clear">
<button>Add something</button>
</div>
</div>
</div>
</div>
.balloonarrow should be as high as #deelnemersballoon
set parent div height in pixels (for ex height:100px ) and set child as 100% (height:100%) . Child only occupies parent div width fully
I never had much luck with height: 100%; even when playing by the rules. What does .balloonarrow do? If you're just trying to snap a graphic to the bottom of the div, you can try position: absolute; and bottom: 0px;, as long as #deelnemersballoon is set to position: relative;.
If you're just looking to make a solid/patterned visual contained by .balloonarrow, you're better off making a stretch image: create an image 3px or 4px tall, make it the background of #deelnemersballoon, and set it to repeat-y. Quick and dirty way to make a 100% height sidebar.
Hope this helps, can't tell much more without seeing your css.
A child div will not take up 100% of its parent if it has something in the markup before it:
Html:
<div id='parent'>Parent (Mark up before child)<div id='child'>Child</div></div>
css:
#parent {background:blue; height:500px; color:white}
#child {background:red; height:100%}
You can find a working example here. (Removing the text from the #parent div will make the child fill it 100%)
http://jsfiddle.net/wcprA/2/
The same thing applies if you have markup after the 100% child aswell, as seen here
http://jsfiddle.net/wcprA/5/
Try adding position:relative to the parent div. Then the 100% on the child div should reference the parent div. In general 100% height is going to look for the nearest parent element that has a position set on it - and if it doesn't find any it will eventually find the body tag and use that.
I have a container background defined in CSS like this;
.container {
background:#fff;
margin-left:auto;
margin-right:auto;
position: relative;
width:970px;
border:1px solid #000;
padding:5px 10px;
}
The problem is I have a jqGrid put in the bottom of the container (near the bottom edge) and when its initially drawn it does fit inside the container panel and looks correct. Something like this (please pardon my non-l33t graphic skillz):
alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg
But then when I populate the grid with rows it outgrows the container and it looks really tacky, something like this (I circled the original container background edges):
alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg
I am sure its something I am doing wrong with the CSS. Any advice would be appreciated.
EDIT: The problem isn't the width its the height of the container being overlapped by the new height of the now populated grid
I've seen this happen many times when you have floats inside. Add a clearing div just before closing container. You should always clean up after floats.
<div class="container">
<div id="nav" style="float:left;">
...
</div>
<div id="grid" style="float:left;">
...
</div>
<div style="clear:both;"></div> <!-- this does the trick -->
</div>
I disagree with adding float to container. Although this will work, having unnecessary floats will give you more problems down the road. Only use floats where necessary and clear it when done floating.
Also in my experience, overflow doesn't mean anything here unless you define height. I don't think setting overflow on container fixes the issue here. Correct me in the comments if I'm wrong.
.container { overflow:hidden; }
assuming you are dealing with floats, this is one way to make the container actually contain them.
Your container is fixed width and won't grow. What you're probably looking for is min-width. In other words, change:
width:970px;
to:
min-width:970px;
As a note, IE 6 and 7 treat width as min-width, but other browsers do not.
I think you need this in your CSS:
overflow: auto;
Depending on your float situation for the container and the inside grid, you can do a number of different things. You might be able to get away with just adding a clear,
clear:both;
You also can float the parent. This is called, setting a float to fix a float. So if your grid has a
float:left;
Then you can just add
float:left;
to your container css. I really like the Complex Spiral article on containing floats.