I have a div that seems to not be wrapping its inner content
http://c5.dealercontrol.net/inventory/p1
the div id="container" has a black bg and should be wrapping the inner content how can I get it to show the style around all the inner content...
You need to put in a "clear" div or property in your html/css. The code you need is below and i have typed quick example as to where to place it.
<div style="clear:both"></div>
You would place this tag inside your container div, but after all of the inner contents.
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
<div style="clear:both"></div>
</div>
Hope it helps...
This may be unrelated, but it seems that <div id="sort-results"> is missing its closing tag.
Related
I'm trying to design a layout, on which I want to put one div into another. But, the problem is link of the back div is not working.
<div id="container" style="z-index:-10;position:relative;height:100px">
StackOverflow1
</div>
<div id="container1" style="margin-top:10px">
StackOverflow1
</div>
which means, if I'm trying to access link of div id container, then I can't. How to solve this problem.
Note : I can't remove z-index, because I want container1 above of container
Parse has got it right.
Without knowing what context you are using it in, just remove z-index:-10 or change it to a positive value like z-index:1;.
<div id="container" style="position:relative;height:100px;">
StackOverflow1
</div>
<div id="container1" style="margin-top:10px;">
StackOverflow1
</div>
Edit:
I just realised that you said that you wanted to put one div into another. That would be done like this:
<div id="container" style="z-index:1;position:relative;height:100px;background-color:#eee;">
StackOverflow1
<div id="container1" style="margin-top:10px;background-color:#ddd;">
StackOverflow1
</div>
</div>
I put some background-color on the divs to make it clearer.
The answer is, you can't. Because the parent container already been set to z-index:-10, so the child can't have the z-index value higher than that. Maybe you can try change a bit the markup like this one, since you have applied position:relative at the container div there
StackOverflow1
<div id="container" style="z-index:-10;position:relative;height:100px"></div>
<div id="container1" style="margin-top:10px">
StackOverflow1
</div>
Add position:absolute, so the link act like it is inside the parent container with the lower z-index and of course it is accessible. You can see your updated jsfiddle here http://jsfiddle.net/gyheE/2/
The code below is from W3CSchool example:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:80%;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
You can copy the code and paste it to the editor below:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
I have already specified the width of "menu" to 20% and "content" to 80%, why at the right side of "content" has a blank area?
It will only align properly if I add "float:left" in the css style of "content". I can't understand why it behave like that. Anyone can explain?
Thanks for help.
This is because the width of the container for menu and content is set to 500px.
Set it to 100% if you want it to take the whole page:
<div id="container" style="width:100%">
Also if you want the content to simply take all the remaining space, don't assign it a width:
<div id="content" style="background-color:#EEEEEE; height:200px">Content goes here</div>
Here's the full working code:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:100%">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
There is blank area at right of page because your floating div is overlapping your content div because floating divs always float above the other divs (Try removing background-color of menu to see example). When you apply float right/left to your content div, it also floats with menu div hence occupies all the space.
please refer to This site
for more information on float.
Thank you,
DIVs are block elements. This means that 2 DIVs are displayed one bellow another, if not use float , position:absolute;, or inline.
if you use 'float' style express this div present external for 'inline' and present inside for 'block',and will affect the back of the element. so if content right display you can use 'float:left;width:80%' and 'float:left;width:80%'. In fact, this is 'display:inline-block', but according to my experience, it will produce the browser bug.
<div id="contenetarea" style="width:1000px; margin:auto">
<div id="mainarea" style="width:650px;float:left;">
</div>
<div id="sidebar" style="width:350px;float:left;">
</div>
</div>
I want contentarea height=max(mainarea.height,sidebar.height)
I have a problem with google cse result page..
How can i fix it?
Is there a way to do this: mainarea.height=sidebar.height=max(mainarea.height,sidebar.height)
Try adding overflow: hidden; to the #contentarea. That will cause it to wrap everything inside of it, even floated elements.
How can I get the content div to get at the bottom instead of that odd position?
http://jsfiddle.net/madprops/6FFXL/1/
<div>
<div style='float:left'>name </div>
<div style='float:left'>date </div>
<div style='float:left'>comments </div>
</div>
<div id="contenido" style="font-size:20px;">content</div>
EDIT: removed float:top
It is at the bottom for me in your example, (FF5), but you should probably make it safe by setting content to clear your floated divs, like this:
<div id="contenido" style="font-size:20px;clear:both;">content</div>
Also, the float:top on your first div is invalid, there is no top property of float.
<html>
<body>
<div id="content1">
<div id="text1">This text floats left</div>
<div id="images1"><img src="img.jpg" /></div> <!--Floats right-->
</div>
<div id="content2">Text 2</div>
</body>
</html>
When I try to do this, and try to make a layout like a table with two rows with the text floating left and the image floating right in the top row, all that comes up is that the content2-div is squashed into the content1-div. How can I keep them separate?
You need to use clear:both; on your #content2 div
If you really wanna learn everything about floats, check out this amazing tutorial: http://css.maxdesign.com.au/floatutorial/
Use clear:both; on your content#2
Apply:
#images1{
float:right;
}
#content2{
clear:both;
}
and fix your html markup
<div id="images1"><img src="img.jpg" /> <!--Floats right-->
close the div:
<div id="images1"><img src="img.jpg" /> <!--Floats right--></div>
You forgot to close your <div id="images1"> :)
use 'clear:both' on content2 div
I hope you need to add another div before <div id="content2">Text 2</div> which will be <div style="clear:both;"></div>
clear your floats.
Here is an article describing whats going on: Clearing A Float Element
You have not closed off <div id="images1">. If this div is closed and the Content divs arenot float left then it should work.
overflow:hidden on your content1 div will make it expand to include all floated children. (Of course, this will hide non-floated overflowing content.)