I have this html sequence that displays 2 bars. Because inside the first div I display an inline list, I want to use display:table because it looks nicer in this way. The problem is that it extends the div, making it bigger with 20px (and moves the other div lower).
<div class="top-bar></div>
<div class="tail-bar></div>
.top-bar{
width: 520px;
height: 50px;
dispaly: table;
background-color: #FFFFFF;
}
EDIT: I added a JSFiddle http://jsfiddle.net/eCYUT/2/
It is the version without display:table tag
The gap between the ul element and the div element was actually the margin related to the ul element.
To remove it, give margin-bottom: 0px to the class name of the ul element.
ul.stats{
margin-bottom: 0px;
/* other css properties */
}
Related
For some reason setting height to 0px does not actually shrink the element to 0px visually...
<div id="bg">
<div id="animate"><span>WINNER ALERT! Click here to get a million dollars!!!</span></div>
</div>
#bg {
background-color:#898989;
font-family: Helvetica;
padding:20px;
}
span {
border:solid black 1px;
height:0px;
}
#animate {
height: 0px;
}
http://jsfiddle.net/LgKP3/
That is because span is an inline element. Height does not apply to inline element. Inline elements derive their height from the content that is contained in them.
See that here->http://jsfiddle.net/59xjv/
Even height:500px is not applied since the span is inline.
Similarly, it gets applied when you convert it to a block-level element.
See that here->http://jsfiddle.net/59xjv/1/
Hope this helps!!!
Give the <span> tag display: inline-block; and overflow: hidden;.
Fiddle here.
http://jsfiddle.net/LgKP3/1/
You have to set display to inline block, I also set overflow to hidden to hide the contents
span {
border:solid black 1px;
height:0px;
display: inline-block;
overflow: hidden;
}
Span is an inline element not a block level element which means it can't have a height at all.
Regardless the height you assign in the stylesheet for the span, it won't work.
I suggest you use a div with an id or a class of height:0px instead of a span.
Currently I have 3 divs with content that echoes out dynamically using php and mysql.
How can i target the center div of these 3 and apply css to it?
The purpose is to separate the first, second and third div using margin-left and right on the center div to make it look more neat and ofcourse to separate the content of each div so it doesn't look like a complete block of text.
And adding margin:left; to the class is not possible because i want the first div to display "inline" with the div above.
So is there a way to target the center div that is outputted and applying css to it?
The php:
foreach ($stmt as $row) {
$cont_short .= "
<div class='cont_short'>
<h1>".$row['title']."</h1>
<p>".$row['description']."</p>
</div>
"
;
The CSS:
.cont_short{
float: left;
width: 31.5%;
padding: .4em;
margin-bottom: .5em;
background: #DDD8DC;
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
-khtml-border-radius: .2em;
border-radius: .2em;
}
Just going with the line below
How can i target the center div of these 3 and apply css to it?
Than you can use nth-of-type selector to target the second div specifically...
div.wrap div.cont_short:nth-of-type(2) {
color: red;
}
Demo
So the above selector selects 2nd div which is nested inside element having a class of .wrap
I have a content div where all the content is located. this div has a border. I would like to place things inside this div so that this div expands if the content inside is too big. Should the items inside the content div be a "div" or a "p" and what css position should they have?
CSS:
#content{
position: relative;
margin-left: auto;
margin-right: auto;
border: 1px solid #E0E0E0;
min-height: 200px;
width: 1000px;
padding: 0px 0px 80px 0px;
background-color: #fff;
}
When you set width: 1000px; it will prevent the content div from being any wider. I suspect you want min-width: 1000px; instead.
For internal content use p tags if you are creating paragraphs that only use inline html elements. If you are using block level elements then use div tags.
I can't say how you should style your internal elements because I know nothing about your design specs.
Contents of the #content div can be either p or div elements its up to you. The #content div will expand to the height of its content either way unless you have elements inside #content with a float property.
If that is that case you can do something like below to make the #content div expand its height.
<div id="content">
<div style="float:right; border:1px solid red; height:500px;"></div>
<div style="clear:both;"></div>
</div>
The important part here is the latest div with clear:both property which fixes the height of the parent element.
You should still be able to use a DIV. If you use height:auto; that should make it expand based on your content. Also I think you can use min-height:200px; and height:auto; together; With that said. I also agree with mrtsherman, if you set a width or height to a specific pixel it is going to limit you to those constraints.
This is my code snippet :
Html
<div class="app-cont">
<div class="app-head">
Additional Comments :
</div>
<div class="app-main">
balallalalalallalalalala
<br/>
jaslnflkasnlsnlksanlknslnwkin
<br />
lknlkanfklnlk
</div>
</div>
CSS:
div {
color:white;
}
.app-cont {
background: black;
width: 90%;
padding-top: 2.5px;
padding-bottom: 2.5px;
margin-bottom: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.app-head {
background: #484848;
width: 25%;
margin-bottom: auto;
display: inline-block;
border-top-right-radius:2px;
-moz-border-top-right-radius:2px;
border-bottom-right-radius:2px;
-moz-border-bottom-right-radius:2px;
}
.app-main {
display: inline-block;
text-align: justify;
}
demo
It works till i dont add enough content on the div with class app-main. But when i add enough content in the div the div with class app-head gets to the bottom.
While i want it in the middle.
How can i do this ?
Just add vertical align style.
.app-head,.app-main{
vertical-align:middle;
}
You can use it on inline-block elements to position near other inline-block elements or near inline elements.
Well I wasn't sure entirely what the goal was, but if I understood you correctly, you wanted to keep the block holding the additional comments text in the middle of the text to the right?
I've updated your fiddle to see if I've got the solution you need: Updated Fiddle
I've positioned .app-head absolutely, and used a top:50% and a negative margin to keep it centred vertically. You also have to give .app-cont a relative position for this to work, and the comments section needs a left-margin slightly greater than the width of .app-head.
Anyway, hope that helps!
I did some other changes as well..
http://jsfiddle.net/Ues8Q/4/
..but the main idea is this:
Outer container has: position: relative;
The thing you want to center has: position: absolute; left: 0px; top: 50%; margin: -exactly half of the height of this element; height: whatever it is;
and requirement is that the element you want to center has fixed height...
Can you force a container DIV height to accomodate two floated div children? Is there a fancy trick I can use to do that? I am trying to make two equally sized divs inside the parent div. I would like them to appear side by side with a little whitespace between them. Child2 tends to pop out and go below Child1. Note Child2 contains a table. Should I be floating?
HTML:
<div id="parent">
<div id="child1"></div>
<div id="child2">
<table><tr><td>content</td></tr></table>
</div>
</div>
CSS:
div#parent
{
background-color: #C6E4E0;
border: solid 3px #017E6F;
font-family: Arial;
font-size: 10pt;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
width:99%;
}
div#parent div
{
width:49%;
float:right;
padding:3px;
}
div#parent div:first-child
{
float:left;
}
This is not a clearfix issue guys, his problem is that his two floated divs are not appearing side by side.
First of all, you do not need to set the width of the parent div, divs are block elements which means they automatically adjust their width to take up the full width of their parent (in this case, presumably the parent of div#parent is the body).
Because you are setting the width explicitly AND giving it padding, it can potentially extend BEYOND the body. That doesn't really matter, but if you apply this same knowledge to the child floated divs and you can see why the right one might get bumped down to the bottom.
First, if you are explicitly setting the widths of the divs to a percentage, you do not need to add padding. Because you are dealing with percentage widths, it is better to add padding to the content of the divs rather than the divs themselves, because padding is ADDED to the width. Therefore, if you added 10px padding to a div that had a 49% width in a 100px parent, it would have a width of 49px + 10px + 10px (2 sides) for a total calculated width of 69px.
Since you didn't post your markup and content or which browser you are testing in, I can't say exactly why the div is being bumped down. There are two likely possibilities.
You are using IE, which allows tables to extend beyond its parent div which will cause breakage. Try explicitly setting the table width to a percentage of its parent or something like that.
The 49% width + padding = greater than [parent-width] - [left-div-width]. This will cause it to get bumped down because the left div and right div are too wide for the parent width.
I use the clearfix class.
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
/** html .clearfix {height: 1%;}*/
.clearfix {
display: block;
}
/* End hide from IE-mac */
then just use the class in every floated-element container.
#container { width:200px; }
.floated { width:100px; float:left; }
.clear { clear:both; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
<div class="clear"></div>
</div>
I am not a fan of clear: both;, I rather do this in Jonathan Sampsons example:
#container { width:200px; overflow: hidden; }
.floated { width:100px; float:left; }
<div id="container">
<div class="floated">A</div>
<div class="floated">B</div>
</div>
By the way, you want
div#parent > div { float:left; }
instead of
div#parent div:first-child { float:left; }
which is still not IE6 friendly, but it will float both child DIVs.