<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>
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 am using bootstrap fluid layout. The layout I desire is as follows:
My html code
<div class="container">
<div class="row-fluid">
<div class="span4 well">span4</div>
<div id="h" class="span8 well ">span8</div>
</div>
<div id='calendar' ></div>
</div>
It gives span4 and span8 column in a row for desktop. On a small device, it puts span4 at the top and displays span8 below it. But, when the screen is resized, I wanted to have span8 at the top and span4 below it.
The solution I tried
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div class="span4 well ">span4</div>
</div>
<div id='calendar' ></div>
</div>
It works but it gives following layout for big screen. span4 leaves some margin initially which I want to avoid.
How can I do that?
Try adding this style:
#x{
margin-left: 0px;
}
And updating your html to:
<div class="container">
<div class="row-fluid">
<div id="h" class="span8 well pull-right">span8</div>
<div id="x" class="span4 well">span4</div>
</div>
<div id='calendar' ></div>
</div>
The id is just trumping this portion of the Bootstrap css:
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
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>
I'm confused at a basic problem, and I'm not sure how to go about this --
Take a look at www.hncharity.com
If you look at the content div, it's slightly off center (It becomes more pronounced as you go into mobile view).
The div is structured like so:
<div class="container">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
The .content class has a white background, adds padding, and a margin all around the span10 offset1 div, to make the width appear smaller.
This is the css for content
margin:40px;
padding:40px;
position:relative;
margin-top:-200px;
z-index:1201;
background-color:white;
As you can see, the content does not appear to be centered. What would I do to fix this?
you missed to add a container with class row before span and after container.
Correct way:
<div class="container">
<div class="row">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
</div>
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>