I have a div with the class "flag" with a picture inside of it. The div is sitting nested inside of another div named "top". "top" contains a number of other divs inside of it. For some reason the "flag" CSS class listed below isn't being applied to the "flag" div with the same class. Why?
.flag img {
width: 1px;
height: 1px;
margin: auto;
}
<div name="top">
<div class="blog-title">
Vote Yes On Proposition 11.2
</div>
<div class="flag">
<img src="https://ak3.picdn.net/shutterstock/videos/2565830/thumb/1.jpg"> </img>
</div>
<div id="description" class="container">
<h1> Proposition 11.2 is an amendment to the already in place law that allows the humane execution of inmates via what our scientists are calling "Orbital Execution".
</h1>
</div>
</div>
This should result in the picture in the above div being 1px by 1px, but for some reason it isn't working. For the life of me, I can't figure our why. What punctuation mark did I miss?
edit: for some reason, I made a new CSS class titled "flag2" and that seemed to do the trick. I still have no idea what was wrong, all I did was copy and paste the "flag" class, rename it to "flag2" and changed the target of the div class.
Images are display:inline by default, and so setting a width, height, and margin:auto won't work like you expect. Try setting display:block on the IMG tag as well. That should do the trick.
It does work however your style is only 1px making it difficult to see, try increasing few pixels
.flag img{
width: 100px;
height: 100px;
margin: auto;
}
Related
I'm working on a project to better my knowledge of Spring MVC practices. To do this, I've been creating a very scaled down version of Twitter. Basically, a user can sign in and post a little blurb and also see a timeline of their previous blurbs and all their follower's blurbs.
I have a background image across the whole page and a container in the middle with a light blue background for just the post blurb box and the timeline. The light blue background only goes to the bottom of the visible page. If the timeline goes down past a single page view where you have to scroll down, the light blue background stops at the bottom of what was visible on the initial load.
I have my page defined like this:
The div class=blurb is the blurbs in the timeline.
<div id="container">
<div id="mainPanel">
<div id="timeline">
<div class="class="blurb"">
<span class="user">test</span> <span
class="displayName">Test User</span> <span class="bodytext">This is a small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
<div class="blurb">
<span class="user">admin</span> <span
class="displayName">Test admin</span> <span class="bodytext">This is another small blurb.</span>
<span class="timestamp">1 hours ago</span>
</div>
</div>
</div>
</div>
The CSS style for the container is shown below.
#container {
width: 650px;
height: 100%;
margin: 0 auto;
padding: 10px;
background-color: #DDEEF6;
}
Can I modify that container CSS in a way to make it be as long as the timeline is? The timeline grows with every blurb post.
Screenshot with height defined to 100%
Screenshot with height undefined
UPDATE:
Okay, so it absolutely has to do with the floats. Thanks to the two commenters below. The #socialPanel is defined as such:
#socialPanel {
width: 250px;
float: right;
}
Using Chrome's developer tools, if I clear the float is drops the social panel below my blurbs/tweets and moves the light blue background all the way down the list of blurbs.
Any suggestions on what I could research to keep the socialPanel floating left at the top, but still have my light blue background use all the available height? Many thanks on helping me figure it out this far!
UPDATE TWO:
I combined the methods shown in the answer below to solve my problem. I added a div with class clearer with clear:both; and then removed the height: 100%; from the #container styling. This resolved the problem.
NOTE:
Adding the overflow: hidden; to my container's styling made the page cut off after the light blue area, it did not make the light blue area go all the way down.
Many thanks to all the help! I'm still learning and it was all very appreciated!!
Place overflow:hidden on the #container.
How does it work?
One would think placing this style on a container would hide the floats instead of containing them. What actually happens is that overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This CSS fix is more practical then including an additional element in the HTML styled with clear:both and works on all modern browsers, including IE7+.
You probably just need to add a clearing div after your two inner divs. http://jsfiddle.net/c3vTU/1/
<div class="outer">
<div class="inner-left"> Stuff on the left</div>
<div class="inner-right">Stuff on the right <br/><br/></div>
<div class="clearer"> </div>
</div>
CSS
.outer {
width: 520px;
padding: 10px;
background-color: #eee;
}
.inner-left {
float: left;
width: 300px;
background-color: red;
}
.inner-right {
float: right;
width: 200px;
background-color: yellow;
}
.clearer {
clear: both;
}
As #MichaelIrigoyen noted, you can also just add overflow: hidden or overflow:auto (I think makes more sense) to your container. http://jsfiddle.net/c3vTU/4/ This is cleaner and I love it!
If you simply remove the height declaration (height: 100%;) from #container, it will expand as its children do (and the background of course, too).
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS properties being passed up to the parent element when the DIV is empty
I'm a newbie for CSS layout design.
What I'd like to do at the moment is that I want to make two Div boxes, one nested inside one another. Anyway, my problem is the top margin I set to the inner box didn't behave the way I wanted.
Pls take the portion of script below for example:
[demo.html]
<html>
<header>
<title>Mock-up page</title>
<link href="stylesheets/demo.css" rel="stylesheet" type="text/css">
</header>
<body>
<div id="box1">
<div id="box2">div 2</div>
</div>
</body>
</html>
[demo.css]
#box1{
width: 300px;
height: 300px;
background-color:#0000FF;
}
#box2{
margin-top: 30px;
background-color:#008000;
}
The effect it produced was it only pushed the outer box 30px down from body tag (left-sided in the picture), which wasn't what I had expected (right-sided in the picture).
What was the reason why this happened and how to correct the styling?
Change the margin-top to padding-top will do what you want.
This is a know issue in many browsers.
When the first child of an element has a margin-top (no content before it) the margin overflow the top of the parent element and pushes it like in your case.
Other solutions exists, but all of them are a bit hacky:
Apply a position: relative to the child and change the margin-top to a margin-bottom and apply top: 20px;;
Create an element before the inner box with some content ( can be used here) with height: 0; and overflow: hidden;;
Set a border-top: 1px solid transparent or the same color of the background of the element (in this case, pay attention that the border is added to the height of the object;
and so on...
You could add position: relative to #box1 and position: absolute to #box2.
See this example
CSS Positions Explained
CSS
#box1{
display:block;
width: 300px;
height: 300px;
background-color:#0000FF;
border:solid transparent 1px;
}
#box2{
margin-top: 30px;
background-color:#008000;
}
HTML
<div id="box1">
<div id="box2">div 2</div>
</div>
If you keep the outer box empty (no text node) then it's doing this behavior and to be honest I didn't understand why, but I found it here why it does so and it's known as collapsed margin and I've added border:solid transparent 1px; to soleve the issue but alternatively you can use padding for outer DIV. Here is also an answer on SO.
Demo.
This article by Chris Coiyer does a good job of explaining box-sizing. Understanding that will help you.
I am new in designing and so have some problems...
I need 3 block to be inline and centered, so I tried:
#main .block{
display: inline-block;
border: 1px solid #ECEDE8;
margin: 10px 10px;
overflow: hidden;
height: 265px;
width: 265px;
}
But, when i add an image in to the block, all others goes down.
P.S.
As I see, this problem is in safari, in Firefox all ok.
P.S.S
<div id="main">
<div class="block">main
<img src="style/images/try.png">
</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
</div>
P.S.S.S
As I could figure it out thought Google, all problem is in display: inline-block, in safari works display: inline-table. What solution could be?
You need to set the vertical align property. In this case best option would probably be:
vertical-align: top
So your css should be:
#main .block{
display: inline-block;
border: 1px solid #ECEDE8;
margin: 10px 10px;
overflow: hidden;
height: 265px;
width: 265px;
vertical-align: top;
}
If your blocks are fixed width, why not float them instead and put them in a parent container with a total width and centered using margin: 0 auto
The div element is a block element. The img element is an inline-block element; it has the main features of a inline element (except that it has the block element features of height and width). Therefore, I see two main problems with your code. Firstly, your image is somehow meant to replace the same unit of space as where you as simultaneously displaying the word "main" which can cause a conflict with spacing/display. [I recommend deleting the word "main" from your HTML.] Secondly, you don't specify the height and/or width of the image, which is not really a problem since you have overflow value set to hidden, but still generally you should have a height and/or width value assigned (make them less than the parent container's height and width) as it will make the browsers rendering/displaying more universal/compatible cross-browsers. Implementing a combination of those two things [or of changing your display value to inline-table (which it kind of seems more like what you want since your display seems "tablular")] SHOULD fix your problem. If it doesn't, I would recommend changing your margin value to 0 auto (which will have the effect of centering your image in the middle of your div/parent container), because I have a lingering suspicion that your margin values may also be at play (but only if the other two suggestions don't work). Good luck!
PS: Remember that just because you have overflow: hidden doesn't mean that the browser doesn't "see" the element(s) that are overflowing. Remember the Box Model.
Try this -
<div class="main" id="main">
<div class="block">main
<img src="style/images/try.png">
</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
And instead of #main .block{ just .main {
I'm trying to create a simple (ha) two column layout, where the first column is variable width and the 2nd column is fixed size.
The first column contains a table which works fine except if the td element contains a pre block. In that case, the pre block extends to the 2nd column.
Here is a simple example:
<div class="content">
<div id="Left">
<table id="q-table">
<tr><td>
<div class="q">
<p>This is some paragraph that will be fairly long and wrap.</p>
<pre>This is a very long pre tag that causes headaches.</p>
</div>
<div>
<p>Causes problems if I make class q position: absolute</p>
</div>
</td></tr>
</table>
</div>
<div id="Right">
<p>This is a paragraph on the right with fixed width</p>
</div>
</div>
Here is the CSS style I'm using for this example:
.content {
width: 95%;
position: relative;
}
#Left {
width: 50%;
float: left;
}
#Right {
float: right;
width: 200px;
}
#q-table {
width: 99%;
}
.q {
overflow: auto;
width: 99%
}
If I make the .q class position: absolute then the horizontal flow mostly behaves like I want, but the following div section moves up and messes the vertical alignment.
The pre tag is the culprit. Removing it causes the correct behavior. Unfortunately, pre tags are a necessity.
Think of a StackOverflow layout where a question with code would show up with the scrollbars on a small screen, but if I have a large monitor, the question area would extend and the scrollbars would disappear.
Anyone have any ideas?
Does CSS provide support for what I'd like to do?
This may not provide the desired result. But you can adjust the white-space property instead.
For example, setting it to normal will make it behave like, say, a p tag:
pre {
white-space: normal;
}
See it in action - http://jsfiddle.net/az85F/
Otherwise, set the width and overflow properties. That's what this very forum does for code samples. A quick example - http://jsfiddle.net/mj6Nh/1/
I have come to the conclusion that it is simply not possible to provide the behavior described.
I believe the problem is that the table and the tags conflict with each other.
The table does not enforce the proportional spacing directive when one of the cell element uses a pre tag.
I am trying to lay out a table-like page with two columns. I want the rightmost column to dock to the right of the page, and this column should have a distinct background color. The content in the right side is almost always going to be smaller than that on the left. I would like the div on the right to always be tall enough to reach the separator for the row below it. How can I make my background color fill that space?
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
Edit: I agree that this example is very table-like and an actual table would be a fine choice. But my "real" page will eventually be less table-like, and I'd just like to first master this task!
Also, for some reason, when I create/edit my posts in IE7, the code shows up correctly in the preview view, but when I actually post the message, the formatting gets removed. Editing my post in Firefox 2 seems to have worked, FWIW.
Another edit: Yeah, I unaccepted GateKiller's answer. It does indeed work nicely on my simple page, but not in my actual heavier page. I'll investigate some of the links y'all have pointed me to.
Ahem...
The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
Actually, 100% height will not work in most design situations - this may be short but it is not a good answer. Google "any column longest" layouts. The best way is to put the left and right cols inside a wrapper div, float the left and right cols and then float the wrapper - this makes it stretch to the height of the inner containers - then set background image on the outer wrapper. But watch for any horizontal margins on the floated elements in case you get the IE "double margin float bug".
Give this a try:
html, body,
#left, #right {
height: 100%
}
#left {
float: left;
width: 25%;
}
#right {
width: 75%;
}
<html>
<body>
<div id="left">
Content
</div>
<div id="right">
Content
</div>
</body>
</html>
Some browsers support CSS tables, so you could create this kind of layout using the various CSS display: table-* values. There's more information on CSS tables in this article (and the book of the same name) by Rachel Andrew: Everything You Know About CSS is Wrong
If you need a consistent layout in older browsers that don't support CSS tables, you need to do two things:
Make your "table row" element clear its internal floated elements.
The simplest way of doing this is to set overflow: hidden which takes care of most browsers, and zoom: 1 to trigger the hasLayout property in older versions of IE.
There are many other ways of clearing floats, if this approach causes undesirable side effects you should check the question which method of 'clearfix' is best and the article on having layout for other methods.
Balance the height of the two "table cell" elements.
There are two ways you could approach this. Either you can create the appearance of equal heights by setting a background image on the "table row" element (the faux columns technique) or you can make the heights of the columns match by giving each a large padding and equally large negative margin.
Faux columns is the simpler approach and works very well when the width of one or both columns is fixed. The other technique copes better with variable width columns (based on percentage or em units) but can cause problems in some browsers if you link directly to content within your columns (e.g. if a column contained <div id="foo"></div> and you linked to #foo)
Here's an example using the padding/margin technique to balance the height of the columns.
html, body {
height: 100%;
}
.row {
zoom: 1; /* Clear internal floats in IE */
overflow: hidden; /* Clear internal floats */
}
.right-column,
.left-column {
padding-bottom: 1000em; /* Balance the heights of the columns */
margin-bottom: -1000em; /* */
}
.right-column {
width: 20%;
float: right;
}
.left-column {
width: 79%;
float: left;
}
<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>
<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>
This Barcamp demo by Natalie Downe may also be useful when figuring out how to add additional columns and nice spacing and padding: Equal Height Columns and other tricks (it's also where I first learnt about the margin/padding trick to balance column heights)
I gave up on strictly CSS and used a little jquery:
var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();
if (leftcol_height > rightcol_height)
rightcol.height(leftcol_height);
else
leftcol.height(rightcol_height);
Here's an example of equal-height columns - Equal Height Columns - revisited
You can also check out the idea of "Faux Columns" as well - Faux Columns
Don't go the table route. If it's not tabular data, don't treat it as such. It's bad for accessibility and flexibility.
I had the same problem on my site (shameless plug).
I had the nav section "float: right" and the main body of the page has a background image about 250px across aligned to the right and "repeat-y". I then added something with "clear: both" to it. Here is the W3Schools and the CSS clear property.
I placed the clear at the bottom of the "page" classed div. My page source looks something like this.
body
-> header (big blue banner)
-> headerNav (green bar at the top)
-> breadcrumbs (invisible at the moment)
-> page
-> navigation (floats to the right)
-> content (main content)
-> clear (the quote at the bottom)
-> footerNav (the green bar at the bottom)
-> clear (empty but still does something)
-> footer (blue thing at the bottom)
I hope that helps :)
No need to write own css, there is an library called "Bootstrap css" by calling that in your HTML head section, we can achieve many stylings,Here is an example:
If you want to provide two column in a row, you can simply do the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-md-6">Content</div>
<div class="col-md-6">Content</div>
</div>
Here md stands for medium device,,you can use col-sm-6 for smaller devices and col-xs-6 for extra small devices
The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
A 2 column layout is a little bit tough to get working in CSS (at least until CSS3 is practical.)
Floating left and right will work to a point, but it won't allow you to extend the background. To make backgrounds stay solid, you'll have to implement a technique known as "faux columns," which basically means your columns themselves won't have a background image. Your 2 columns will be contained inside of a parent tag. This parent tag is given a background image that contains the 2 column colors you want. Make this background only as big as you need it to (if it is a solid color, only make it 1 pixel high) and have it repeat-y. AListApart has a great walkthrough on what is needed to make it work.
http://www.alistapart.com/articles/fauxcolumns/
I can think of 2 options
Use javascript to resize the smaller column on page load.
Fake the equal heights by setting the background-color for the column on the container <div/> instead (<div class="separator"/>) with repeat-y
Just trying to help out here so the code is more readable.
Remember that you can insert code snippets by clicking on the button at the top with "101010". Just enter your code then highlight it and click the button.
Here is an example:
<html>
<body>
<style type="text/css">
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
</style>
This should work for you: Set the height to 100% in your css for the html and body elements. You can then adjust the height to your needs in the div.
html {
height: 100%;
}
body {
height: 100%;
}
div {
height: 100%; /* Set Div Height */
}
It's enough to just use the css property width to do so.
Here is an example:
<style type="text/css">;
td {
width:25%;
height:100%;
float:left;
}
</style>
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>