need your help. I created a div that contains 2 floating DIVs. The first Div would be the leftnav. The second Div contains 2 floating DIVs too. The problem #container div height set to auto but not seem to work.
here: jsfiddle
I tried the clear:both at the end of the second div, but it didn't work.
Any help would be appreciated. Thanks
<div id="header">header</div>
<div id="container">
<div id="first">first</div>
<div id="second">
<div id="scol1">
<div id="scol1a">scol1a</div>
<div id="scol1b">scol1b</div>
<div id="scol1c">scol1c</div>
</div>
<div id="scol2">
<div id="scol2a">scol2a</div>
<div id="scol2b">scol2b</div>
<div id="scol2c">scol2c</div>
</div>
</div><!--SECOND DIV-->
<br style="clear: both;" />
</div> <!--CONTAINER DIV-->
<div id="footer">footer</div>
change scol1 height to auto as well. http://jsfiddle.net/Y47sx/31/
You have given 100px height to scol1a, scol1b, scol1c. This causes container having problem. To solve this you should define your #container height: 306px; (100+100+100+6)= 306px. 6px for border.
See this Demo
Note: I have removed <br style="clear: both;" />
In stand of <br style="clear: both;" /> use <div style="clear:both; float:none;"></div> and remove height of <div id="scol1"></div> <div id="scol2"></div>
Related
I have an h4 nested in 2 divs like so
<div id="my-team-lineup" style="text-align:center">
<div id="myteamDiv" style="width:100%; ">
<div id="myTeamBeforeDiv" style="width:50%; float: left;">
<center>
<h4>Before Trade</h4>
<div class="tableRow header blue" id="statTable0">
<div class="cell">Pos</div>
<div class="cell">Players</div>
<div class="cell">Opp</div>
<div class="cell">Proj Pts</div>
</div>
<div class="tableRow">
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text</div>
</div>
<br />
<h4>Week At Bottom</h4>
</center>
</div>
</div>
I want to have this h4 sticky to the bottom of the page. I have tried every combination of position and bottom I can think of and nothing is working. Just a note as I have an exact replica of this that takes up the other 50% of the page, and the height of the divs can be different due to content.
First, you didn't closed all divs in your code. correct it.
You can set position as fixed and bottom as 0.
HTML
<h4>text</h4>
CSS
h4{
position: fixed;
bottom: 0;
}
https://jsfiddle.net/xxfhqv36/
I have a parent div and 2 sub div as follow:
<div class="parent">
<div style="height:100px; float:left;" >
aaa
</div>
<div style="height:200px; float:left;">
bbb
</div>
</div>
How to set the "parent" css to adapt to the largest height of inner div? In this case: 200px
PS: Neither height=100% nor height=auto works.
Thanks.
The parent div does not take the height of its content, because the inner divs are floating. You have to clear the floating, before closing the parent div. Try this:
<div class="parent">
<div style="height:100px; float:left;" >
aaa
</div>
<div style="height:200px; float:left;">
bbb
</div>
<div style="clear:both"></div>
</div>
EDIT: You might want to have a look at this w3c article for in-depth information about floats and clearing: http://www.w3.org/wiki/Floats_and_clearing
You can also "overflow:hidden" on the parent element, although you may encounter problems if you want things to break out of that div (e.g. negative margins, box-shadow, etc).
<div class="parent" style="overflow: hidden;">
<div style="height:100px; float:left;" >
aaa
</div>
<div style="height:200px; float:left;">
bbb
</div>
</div>
I followed the link given by peterp and would like to quote a method they mention, which worked for me. This method is first on their list and described as simply :)
Make the outer div also float
<div class="parent" style="float:left;">
You need to add style="clear:both"
<div class="parent">
<div style="height:100px; float:left;" >
asljkdh
</div>
<div style="height:200px; float:left;">
bbb
</div>
<div style="clear:both"></div> <!-- Add this Line-->
</div>
This would be the situation, i'll try keeping it clear:
<div id="text">
text...text...
</div>
<div id="image">
<img>
</div>
How can I show the image on top and wrap text around the image?
Thanks.
<div id="image">
<img style="float:left" />
text...text...
</div>
It's good practice to wrap your text elements in a paragraph tag, although both block-level and inline-level elements will wrap around a floated element:
http://jsfiddle.net/Wexcode/UsvQd/
<div id="text">
<div id="image"><img src="#" alt="" /></div>
<p>text...text...</p>
</div>
CSS:
#image { float: left; }
I have the following:
<footer id="contentinfo" class="footer">
<div class="networking_wrapper">
<div style="float: left;"><img src="#Url.Content("~/Content/Images/twitter.png")"/></div>
<div style="float: left;"><img src="#Url.Content("~/Content/Images/flicker.png")"/></div>
<div style="float: left;"><img src="#Url.Content("~/Content/Images/facebook.png")"/></div>
<div style="float: left;"><img src="#Url.Content("~/Content/Images/blog.png")"/></div>
</div>
</footer>
How can I make .networking_wrapper to be centered on #contentinfo (which is a width 100% of the view because, as you can see, is the footer of the page).
Resolved!
Just had to add text-align:center; to the <footer>
and set .networking_wrapper display: inline-block.
Hope it helps someone =)
<div style="float:left">
<div class="designerWrapper">
<div class="pageBox">
content
</div>
</div>
</div>
<div style="float:left; margin-left:10px;">
content 2
</div>
<div style="clear:both"></div>
<br /><br />
How do I make the div that holds content 2 100% width? If I set it to 100% width it is too wide, at the moment it expands with it's contents length.
you sould use the table stuff
<div id="outer1">
<div id="outer2">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
css:
#outer1 {display:table;width:600px;height:30px;}
#outer2 {display:table-row;width:600px;height:30px;}
#left {display:table-cell; width:15px;}
#right {display:table-cell; width:auto;}
important there is no floating! because the table display floats the cells automatically.
i didnt test the code hope works.
You can set min-width depend upon your requirement.
later on it will expand with its content
<div style="float:left; margin-left:10px;min-width:110px;">
content 2
</div>