I am trying to get a div that resides in a container div to scale the container divs height when the div inside the container gets taller. When the height of the div inside the container gets taller than the container itself it just moves past the bottom of the container. I want the container to scale with the contained div. How do I do this in CSS?
Graham. What you describe is the default behavior of a DIV, or any block element for that matter. e.g. for the following HTML:
<style type="text/css">
dl { margin: 0; padding: 0;}
#container {
background-color: blue;
padding: 5px 5px 5px 5px;
}
#inner {
background-color: red;
}
</style>
<div id="container">
<div id="inner">
<dl>
<dt>Stuff</dt>
<dd>Blah blah blah</dd>
<dt>Foobar</dt>
<dd>Bazquux</dd>
</dl>
</div>
</div>
You will get the following rendered HTML:
(source: rackspacecloud.com)
The situation you describe when the container div doesn't expand to contain the inner div occurs when you have floated the inner div. Floating, by definition, breaks a block element out of the constraints of it's containing element. Applying "float: left;" to your #inner element gives the following:
(source: rackspacecloud.com)
The solution is to add a block level element at the bottom of the containing div that clears the floated element. This causes the containing div to wrap around this new block level element, and thus your floated elements as well.
e.g.
<style type="text/css">
dl { margin: 0; padding: 0;}
#container {
background-color: blue;
padding: 5px 5px 5px 5px;
}
#inner {
background-color: red;
float: left;
}
</style>
<div id="container">
<div id="inner">
<dl>
<dt>Stuff</dt>
<dd>Blah blah blah</dd>
<dt>Foobar</dt>
<dd>Bazquux</dd>
</dl>
</div>
<div style="clear: both;"></div>
</div>
This will give output identical to the first image.
Obviously, this can be a tedious thing to add to the bottom of your container divs if you do a lot of floating.
Using CSS2 you can do this with a simple class definition (and a hack for IE of course):
<style type="text/css">
dl { margin: 0; padding: 0;}
#container {
background-color: blue;
padding: 5px 5px 5px 5px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {height: 1%;}
#inner {
background-color: red;
float: left;
}
</style>
<div id="container" class="clearfix">
<div id="inner">
<dl>
<dt>Stuff</dt>
<dd>Blah blah blah</dd>
<dt>Foobar</dt>
<dd>Bazquux</dd>
</dl>
</div>
</div>
Simply add the clearfix class to any of your container divs that contain floated elements. Note the "* html" is the hack required by IE.
You just need to give height property by percent such as:
percent { display:block:height:100%; } as your div stands in html:
<div class="percent"></div>
Simply add
overflow: auto;
to the outer div.
If you mean "scale" as in just simply expanding, perhaps I read your description as the container div having a height of, say, 500px, and the contained divs will push this out more if they grow too large. In that case, perhaps you can use min-height instead?
min-height: 500px;
If you mean "scale" as in the container div is 500x500px, the contained takes up an initial height of 200px that expands to 400px with more content, which pushes the container div to 1000x1000px (akin to zooming/enlarging), then that might be more complicated.
Related
I have a style set out for a div class, for some html that is loaded from this text file.
content.txt
<div class="container">
<main class="content">
<strong>Paragraph Title</strong> <br>
Lots of text that actually goes here.
</main><!-- .content -->
</div><!-- .container-->
In fact, the text between the <strong> tags doesn't look any different that the rest of that text.
CSS
<style type="text/css">
#auto-slideshow {
position:relative;
z-index:1;
overflow:hidden;
margin:0 auto;
height:300px;
border:2px solid #333333;
box-shadow:0 0 5px 0 #000;
-webkit-box-shadow:0 0 5px 0 #666;
}
#auto-slideshow img {
height: 100%;
width: 25%;
position:absolute;
margin-left: 32.5%;
z-index:1;
opacity:0;
-webkit-transition:opacity .8s linear;
}
#auto-slideshow img.show {
opacity:1;
}
.content {
border-right: solid 1px #999999;
}
</style>
HTML
<div class="middle">
<?php
echo file_get_contents( "modules/content.txt" ); // get the contents, and echo it out.
?>
<?php
echo file_get_contents( "modules/leftSidebar.txt" ); // get the contents, and echo it out.
?>
<?php
echo file_get_contents( "modules/rightSidebar.txt" ); // get the contents, and echo it out.
?>
</div><!-- .middle-->
And here is what shows up when I inspect the element
Update
I increased the size of the border to crazy amounts (100px) and found that the text is wrapping around what should be the border, but it's still not showing the border.
Check your stylesheet. In the inspect element panel, it shows that the padding property is defined two different times, one in line 113, and the second one in 162. Remember that css uses the last definition, so you should:
Specify your rules after line 162
Remove the rules in line 162
Use the !important tag in the first definition so it uses that one instead
Any of these should work
I have this HTML:
<div class="dashboard_wrap">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
that displays 3 divs, here is the CSS:
.dashboard_wrap {
padding:10px;
}
.dashboard_wrap div {
border-left:1px solid black;
padding:10px;
width: 50%;
height:200px;
margin-bottom:50px;
overflow-y:scroll;
float: left;
}
.dashboard_clear:after {
content: "";
display: table;
clear: both;
}
#media all and (max-width: 700px) {
div.wrap div {
width: 100%;
float: none;
}
}
I am using PHP so only certain users can see certain divs. If a user can only see the first 2 divs, how can i make them 50% each rather than 40%?
There is no need to use php or javascript for this. You can use basic html and css for this.
You can check the html fiddle for this: http://jsfiddle.net/4WaX4/1/
All the css which you need is this:
.dashboard_wrap {
display:table;
min-width:500px;
background:#00ff00;
}
.dashboard_items {
display:table-row;
}
.dashboard_items div{
display:table-cell;
border:1px solid #ff0000;
}
#media all and (max-width: 700px) {
div.dashboard_items div {
width: 100%;
display:block;
}
}
And the html looks as follows:
<div class="dashboard_wrap">
<div class="dashboard_items">
<div>orders</div>
<div>porting</div>
</div>
</div>
<div class="dashboard_wrap">
<div class="dashboard_items">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
</div>
Very simpel and quick. When you resize the result window in jsfiddle you see that the divs become 100% relative to the outer div (500px).
I hope this is the solution youre looking for...
You can specify the class of the wrapper based on the number of items inside.
CSS classes for each variant will handle the style automatically.
If however the number of divs can extend beyond expected numbers, then dynamic inline styles may be your solution.
<div class="dashboard_wrap has3">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
<div class="dashboard_wrap has2">
<div>orders</div>
<div>porting</div>
</div>
<style>
.dashboard_wrap div {
border-left:1px solid black;
padding:10px;
height:200px;
margin-bottom:50px;
overflow-y:scroll;
float: left;
}
.dashboard_wrap.has2 div {
width: 50%;
}
.dashboard_wrap.has3 div {
width: 33%;
}
</style>
When the page gets rendered, only two divs will be visible. What you need to do is use a client-based language i.e. javascript or jQuery, to manipulate what is visible on screen.
Use a simple check to see what divs are visible or use php to generate a value which you can hide in the page to make it easier to resize the divs like:
<input type='hidden' id='divs_visible' value='" . $divs_visible ."' />
then using jQuery:
$(document).ready(function() {
var divsvis = $("#divs_visible").val();
if(divsvis == 2)
{
// resize the divs
}
});
EDIT
You can also render all the divs, then using jQuery and the value you've placed in the hidden input, you can simply hide the div you do not need with:
$("#div_to_be_hidden").hide();
I am retrieving a list of products from a database and want to display them all in a rows of 3 columns not using a table though. So I want 3 divs to be displayed side by side. then below.
<div class="productindividualdisplay">
<div class="productphoto">
<img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250"></p>
</div>
<div class="producttitle">
<?php echo $row['title'] ?>
</div>
<div class="productprice">
<?php echo "<div id='productrrp'> €" . $row['rrp'] . "</div>";
if(is_null($offeringprice)) {
echo "Not Available";
} else {
echo "€" . $offeringprice['price'];
}
?>
</div>
That is my code but it is just displaying the divs below each other. Is it possible so it fills up the row before starting another one?
Try using display: inline-block; on the divs's css.
A <div> is a block-level element. Block-level elements, like <h1>, <p>, <table> etc. will (by default) span the entire width of their parent elements, so they can't be positioned next to eachother.
You can change this behavior, however, using the following CSS rule:
div.column {
display: inline-block;
}
This will render the <div>s as inline blocks.
Now you can give it a certain width so that three divs fit into a row. Do note that, when you leave whitespace between two <div> elements, there will be some visual whitespace. If you give all div's a width of 33.333333333%, the extra whitespace will cause their combined width to exceed 100%, so the third div will move to the next line.
You can simply prevent this by making sure there is no whitespace between the HTML elements:
<div class="column">
<p>Some contents here</p>
</div><div class="column">
<p>As you can see, no whitespace between the two div elements.</p>
</div>
Of course you can then use margins to control whitespace manually:
div.column {
display: inline-block;
width: 30%;
margin-right: 3.33333333%;
margin-bottom: 10px;
}
You might wanna take a look at this article: Using inline-block to Display a Product Grid View (it uses <li>s instead of <div>s, but the idea is essentially the same)
Here's a FIDDLE
<div class="product-wrapper">
<div class="productindividualdisplay">
<div class="productphoto">
<img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250">
</div>
<div class="producttitle">
Product Title
</div>
<div class="productprice">
<span>$100</span>
</div>
</div>
...more products...
</div>
.product-wrapper {
width: 960px;
padding: 10px;
}
.productindividualdisplay {
background: #fff;
display: inline-block;
width: 260px;
margin: 5px 5px 15px 5px;
padding: 10px;
text-align: center;
border: 1px solid #999;
box-shadow: 0 5px 6px -3px #333;
}
.productphoto {
width: 95%;
margin: 10px auto;
border-bottom: 1px solid #999;
}
.producttitle a {
font-size: 18px;
text-decoration: none;
}
.productprice {
font-size: 18px;
font-weight: 600;
}
I am using a bunch of divs (created with PHP) to generate a block of clickable elements. What I need to do is apply some styles to these generic elements, rather than to specific ones, yet using the code below seems to be invalid.
#Container {
height: 80%;
width: 60%;
background-color: green;
}
#Container div:hover {
background-color: blue;
}
<div id="Container">
<div style="background-color: red; width: 100px; height: 100px;">
</div>
http://jsfiddle.net/XD2eZ/
So I am not sure if it is an issue that a generic div element cannot be styled as a sub-element AND have a :hover attribute that operates properly. I know that classes or id's can be specified to handle this, but have thousands of unique divs. I also cannot use
#Container:hover div{ background-color: blue;}
As it ALSO seems to be invalid, but I need to select the one element from a block, and not all at once.
Any ideas here? Thanks in advance.
This will work if you remove the background color from the HTML, and apply it using css:
#Container {
height: 80%;
width: 60%;
background-color: green;
}
#Container div {background-color: red;}
#Container div:hover {
background-color: blue;
}
Example: http://jsfiddle.net/XD2eZ/1/
The reasone is CSS Specificity - a style attribute rule is much more specific (stronger) than an ID + element rule.
Say I have code like such:
<div id="thisone">Content</div>
<div id="thatone">More Content</div>
Say both elements have a background color, so you can see their size, then is there a way to align the element with an id of #thisone according to the element with an id of #thatone? thanks!
(Edit: One of the elements has position:fixed, while the other is position:static)
Can you maybe explain a little better what you are trying to achieve? As you have added the "center" tag, maybe you want something like this?
<style>
#thisone {
background-color: red; width: 200px; height: 80px;
margin-left: auto; margin-right: auto;
}
#thatone {
background-color: blue; width: 200px; height: 80px;
margin-left: auto; margin-right: auto;
}
</style>
<div id="thisone">Content</div>
<div id="thatone">More Content</div>
(Which should center both divs in their parent)
set width of boths div's as equal( any number of pixel you want) and then add text-align :center in style,css