<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.
Related
I want to create a faq page like Twitter's FAQ. The left column stays on that position even though the user keep scrolling.
So far here's what I made but it doesn't work.
<template>
<div>header here</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div style="position: sticky;">
1 of 2
</div>
</div>
<div class="col-lg-8">
2 of 2
</div>
</div>
</div>
</template>
According to this, we should add sticky property, but it doesn't work.
edit: I think it's because the two columns have the same height, so adding sticky property does not work. Any solutions on how to make the column height fit to the content only?
Any solution? Thank you!!
Position Sticky is not working on col-sm-4 because its parent class row has display:flex property. if you change
display:flex
to
display:block
then position Sticky property will work but it will change your design
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/
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.)
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.