I'm having an issue getting the name div and time-ago div to float properly. For ex, the time-ago div doesn't seem to want to float to the far right. Here's my current HTML / CSS markup:
http://jsfiddle.net/stickboyski/qCWsk/101/
Any idea what's going on?
BTW, I am using SASS for the CSS.
The parent div of the time-ago div, .metadata clearfix has a display of inline-block. That causes its width to only be the size of its contents. You can either change its display property to block as demonstrated in this fork http://jsfiddle.net/maxbeatty/KJUrL/
.metadata {
display: block; /* to make width 100% of container */
.name {
float: left;
display: inline;
}
.time-ago {
float: right;
}
}
Related
I was wondering if there is an alternative to writing css rather than with css tables to make liquid / dynamic layouts. vinyll really helped me here... simple 3 Column responsive layout
and that is exactly how I need the columns to work, but when I use css tables, it seems I cannot position things inside with margin and padding (I probably could with left and right but relative positing breaks the document flow so I don't want to do that)...heres and example
http://jsfiddle.net/u5nR2/4/
.container{
width:100%;
height:100%;
display: table;
}
div > div {
display: table-cell;
}
.three div{margin-top:100px}/*why doesnt this move?*/
Use padding on the parent element. Margin needs an other element to bounce.
Change
.three div{margin-top:100px}
To
.three { padding-top: 100px; }
Also, change: div > div to .container > div. I assume you only want to select the direct child divs of .container. When you use div > div, the divs inside .one, .two and .three will also be selected. (also mind the vertical-align: top to position the text in the table-cells at the top)
Check your updated Fiddle
I have an image with text aligned to the left of it. Both the image and text is sitting inside a div that I have styled to look like a red bubble in the background of the post. The bubble only goes as far as the text and not the image (the image goes down much farther than the text), causing the image to break into other posts. How do I make this div the correct size that can fit anything i put into it (in this case the image)?
jsfiddle: http://jsfiddle.net/Sederu/CzNr6/
Add overflow:auto to your .post-bubble rule.
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
overflow:auto;
}
jsFiddle example
If you want the content to allow anything inside of it, give it overflow:auto.
If you want the bubble to extend so that it also covers the img tag, however, give .post-bubble a height:
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
height:600px;
overflow:auto;
}
The reason why the image extends farther than the div is because the img is taken out of the flow of the page, i.e. no longer being a block element, when you declare align:right.
either add overflow:auto; to your post-bubble div or define a height to the post-bubble div eg.. height: 600px; covers it nicely..
On div tag do a display:block in css
I think the best solution is to force element to self-clear its children.
div.post-bubble:after {
clear: both;
content: '';
display: table;
}
You can also create a specific class for other elements in your project/projects like:
.clear-children:after {
clear: both;
content: '';
display: table;
}
And add this class (.clear-children, without :after) to every element with floated children.
http://jsfiddle.net/CzNr6/4/
Currently I am designing a website using CSS and HTML etc. But I have faced a problem there : my child div goes outside the parent div when I add floating to the child. The site resides here my web design
Be more specific. Where is the problem on the website?
Try to add this to css, so parent will know about the size of the child element:
#parent{
overflow:hidden;
}
You need to clear after your float.
Try adding this css:
CSS
.container:after {
content: "";
display: table;
clear: both;
}
Test the follwing CSS
.parentDiv {
float: left,
width: 200px,
height: 30px
}
.childDiv{
float: left,
width: 100px,
}
The child division should be included in the parent one, you can use border on both element to make sure.
As an example I'm trying to create a thumbnail, but my automatic img css as listed below is applied
img, img a {
border: none;
margin-top:10px;
margin-bottom:10px;
}
I can't make sense of it in my mind for some reason. I know the syntax is probably simple, but I can't seem to remember it.
Thanks
Chris
The reason you can not add margin to your images is because img elements are, by default, inline. It means you can not give them dimensions, or add margin from the bottom or top (and some other stuff you should probably read about).
This means that in order to give img element margin from top or bottom, you need to declare it as a block, or rather inline-block. This is achieved using
img { display: inline-block; }
Then you can add away your margins, and viola:
img {
display: inline-block;
margin: 10px 0; }
Are you trying to style all images a certain way, then exclude images within a certain container div? If your container div is called #wrapper, then do something like this:
#wrapper img,
#wrapper a img /* assuming that's what you meant rather than img a */
{
/* undo what you did above for images inside #wrapper */
margin-top: 0; margin-bottom: 0;
}
Such loose selectors for img can be troublesome because images are used all the time in different contexts. I prefer to style only images that are inside a #content div, or similar.
I have a website whose layout has been shown in the diagram. The body consists of a main container, which comprises of header, parent div and footer. The parent div further contains several child div as shown.
The problem being height of all the child div is finite. But the parent div contains nothing other than the child divs. All the child divs are visible but the height of the parent div is shown to be zero. I am also not fixing the height of the parent div by giving some pre-specified value as it may cause blunder if number of child increases in future.
The problem due to zero size of parent div is that my footer div is going up and clashing with the contents of the parent div. This can be resolved by giving a suitable margin-top, but that is not a solution I am looking for.
Can anyone suggest me some way so that the height of the parent div changes automatically according to the height of child divs present.
Please comment if I am unclear in asking my doubt !
Seems like you got a case for the clearfix class.
So I'm guessing you're floating the child div and that's why the parent div's height is 0.
When you use floats, the parent doesn't adapt to the height of the children.
You can apply the 'clearfix' classes to the parent of the floating elements (of course you need to have it in your stylesheet) and it will add an insivible '.' at the end. Your parent will then have the correct height.
Note, it's cross platform, compatible IE6 +, Chrome, Safari, Firefox, you name it!
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
Try adding the following to your stylesheet:
#parentdiv:after {
content: " ";
display: block;
clear: both;
}
As Daedalus suggested in his comment, you're probably floating the child divs. If so, the line above fixes it.
The problem when you float things is that their parent element "ignores" them.
The line above creates and inserts a (pseudo-)element into the #parentdiv which is pushed down past all of the floated divs. Then the parent div, which although ignores the floated children, doesn't ignore this pseudo element - acting as it should, it expands to contain the pseudo element. Now, since the pseudo-element is below all of the floated children, the parent div happens, or better yet, seems to "contain" the floated children as well - which is really what you want.
#João-Paulo-Macedo 's work, as implemented in a styled div:
export const HeadroomWrapper = styled('div')`
position: fixed;
top: 0;
left: 0;
width: 100%;
background: white;
z-index: 2;
&:after {
content: " ";
display: block;
clear: both;
height: 1px;
}
`;