I am trying to set a min-height to a floated DIV in a XHTML or HTML document.
The fix of putting a fixed-height DIV into the DIV and clearing it with :after doesn't work at all. Directly assigning a min-height won't work either.
My code as it's now is like (which only works on Firefox in quirks mode but I want it to be something real):
<div style="float:left">
<div style="float:left; height:200px"><!-- min-height hackfix --></div>
CONTENT GOES HERE
<div style="clear:both;"></div>
</div>
I didn't really get what you want, but here is the fix for min-height issue:
selector {
min-height:500px;
height:auto !important;
height:500px;
}
So, your code can be like this
<div style="float:left;min-height:200px;height:auto !important;height:200px;">
CONTENT GOES HERE
</div>
http://jsfiddle.net/ynhat/pcpsS/1/
#Cobra; first close your clear div & instead of clear:both you can just write overflow:hidden in your parent div
<div style="float:left; overflow:hidden">
<div style="float:left; height:200px"><!-- min-height hackfix --></div>
CONTENT GOES HERE
</div>
Edit:
give width:100% to your child div.
Related
I have a #wrapper div that is 100% height. Inside of that I have several content divs, each are displayed as inline-block and have a bottom margin. The problem is that this bottom margin is somehow being collapsed.
The problem can be seen with very simple code:
<div id="wrapper">
<div id="content">
<!-- lots of content here that will fill the browser window -->
</div>
</div>
I've created an example which can be seen here: http://jsfiddle.net/Y6tJw/
I have a feeling this is a webkit issue as both Firefox and IE render the page with the proper margin. Any help?
Don't ask me why it works, but this will work http://jsfiddle.net/Y6tJw/2/
Style
#wrapper { height: 100%; background: blue; }
#innerwrap { padding-bottom:300px; background: blue;}
HTML
<div id="wrapper">
<div id="innerwrap">
<div id="content">
<!-- lots of content here that will fill the browser window -->
</div>
</div>
</div>
this is happening because you gave your body a height of 100% with the min-height. Try giving height:auto; this'll work
I'm getting some strange whitespace between two divs I have.
Each div has the css property display: inline-block and each have a set height and width.
I cannot find where the whitespace is.
Here is a Fiddle
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.
You have:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div>
<div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Change for:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div><div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
However, this is a bad way to do what you want to do.
You should float the elements if thats what you want to do.
Use:
float:left;
clear:none;
In both div
If you want to retain your coding layout, avoid floats and keep each div on it's own line entirely...
<div id="leftSide">Some content here</div><!--
--><div id="rightSide">Some more content here</div>
Only add this to your CSS
h1 {
padding:0;
margin:0;
}
Space between div is only due to h1 Margin and Padding
This does the trick:
<div id="left_side">
...
</div><div id="right_side">
...
</div>
Notice how the right-side div starts immediately after the closing tag of the left-side div. This works because any space between the elements, since they are now inline, would become a space in the layout itself. You can mirror this behavior with two span elements.
Demo.
You can also add display: flex; to the divs' parent container (in this case, body). Fiddle.
best way is settings parent element's font-size to 0 then normal font-size to child elements inside that parent (otherwise inherits zero from parent)
Floated both of the elements left, also made the 30% width into 40% to fill all the space, but this isn't necessary. Please be aware, "inline-block" isn't supported by IE7 but can be fixed with a workaround.
http://jsfiddle.net/RVAQp/3/
Move these statements onto the same line:
</div><div id="right_side">
Tried using float instead of "inline-block", no problems. Just changed the display:inline-block to:
#left_side {float: left;}
and
#right_side {float: right; margin-right: 10%}
No apparent problems. Could be wrong.
Don't know why but I resolved this problem by adding border: 1px solid red;(vertical) and float: left;(horizontal) to related DIV style statement and white-spaces removed.
Parent div set to font-size: 0px and chiilds to wanted size like 17px :)
I'm using the 960 Grid System on this page where I list my instapaper bookmarks: http://labs.tonyhue.com/bookmarks/
However, the social media section is set off from the rest. It should be aligned to the right following the programming section. Any ideas?
Add a (fixed) height to your .grid_6-Container.
.grid_6 {height:250px; /*or something else*/}
Your Problem occurs on floated elements with different height.
Nice reading about floatings: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
Edit:
Otherwise you could add a wrapper element to clear your floats:
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
<div class="wrapper">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
You can clear your floats with .wrapper {overflow:hidden;} OR you can use the clearfix method: http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
The solution doesn't need to be supported by all browsers.
<div id="page">
<div id="header"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
Let's see. page got width:100%;height:100%. header and content got both width:100% (is this required anyway?), but they got fixed heights, let's say height: 200px and height: 500px. Now I want the footer to fill the rest of the page.
Any solution for that?
Thanks for your help.
you could use something like this:
html,body,#page {height:100%}
#page {position:relative;}
#header {height:200px;background:green;}
#content {height:500px;background:grey;}
#footer {position:absolute;top:700px;bottom:0;background:red;width:100%;}
in fact you set position:absolute for #footer and give a value for top 700px; the total height of #header and #content and bottom:0 so will fill the empty space.
Demo: http://jsbin.com/icuza3/2
as far as i know css3 can do "Maths" adn simple functions
see w3c-specifications , search for "calc" ;)
I have a problem as I mentioned above.
In my web app, I'll be generating many divs dynamically by jQuery(ASP.NET MVC).
Each new div can have a different width, and all of them MUST be floated to the left
I tried (test) to float to the left 2 divs, but with no success. What am I doing wrong ?
Each div has a defined width, because when the total width of all divs > mainDIV's width, then the scrollbar will appear. Now, in that case, this 2 divs are not floated to the left
Here's the code
<div id="mainDIV" style="overflow:auto; width:100%;">
<div style="width:960px; float:left; background-color:Lime;">
a
</div>
<div style="width:960px; float:left; background-color:Red;">
b
</div>
</div>
You have to make sure that the containing div is wide enough to accommodate the floated div's side by side.
So in your example, you would have to set the width of the containing div mainDIV to at least 1920px.
You need an additional wrapper if you want the scroll-bars to appear on mainDIV:
html:
<div id="mainDIV" style="overflow:auto; width:100%;">
<div id="wrapper">
<div style="width:960px; float:left; background-color:Lime;">
a
</div>
<div style="width:960px; float:left; background-color:Red;">
b
</div>
</div>
</div>
css:
#wrapper {
width: 1920px;
}
I'd try to use CSS in a way that doesn't have to do style= for each element. Without more context and/or testing I can't guarantee it will fix your problem, but its possible it will and its better form.
Either set float:left for all div tags
div {float:left;}
put all div tags to be floated left in the same class
<div class="className" style="width:960px; background-color:Red;">
a
</div>
div.className {float:left;}
Also, make sure you do not specify any kind of absolute position as this will override the float. There appear to be some subtleties concerning float and width, so check those out too http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://css.maxdesign.com.au/floatutorial/