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.
Related
I am trying to make this Wordpress site responsive, by adding the following custom CSS:
#media (max-width:959px) {
.container, #menu, #featured, .slide .overlay, .slide .overlay2 {
width: 100%;
}
img {
max-width: 100% !important;
height: auto;
}
#menu {
height: auto;
}
}
However, when I move the width of the browser view port to 900px say, #menu (the top navigation menu) will increase in height to accommodate #menu's LI elements which have floated down and left, but #content-full (the parent container of the image slider) will creep up over the bottom half of #menu, hiding the LI elements which have been pushed down and left.
The theme contains:
#content-full {
position: relative;
}
So why does #content-full act like it is position: absolute?
Thanks.
The problem is not with the content but with the header. The #header has an attribute height: 134px. And the #menu inside this header has been given position: absolute. Since absolutely positioned elements are taken out of context before rendering, the parent (in this case #header), would not grow to accommodate the height of #menu as expected. That is the reason why the height has been explicitly specified. The content is not behaving as absolutely positioned. It is the aforementioned behavior of the header that makes it look like that.
One workaround this could be to provide an additional style that changes the height of #header to accommodate the next row of the menu.
Something like this for max-width: 959px
#header {
height: 174px;
}
This would take care of the second row of menu items.
Note: Your background image used for the menu would then break. Because it has been made for that single row of menu. I would suggest replacing that background image, with CSS-gradients and rounded borders.
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/
.mainCoverWrapper {
position: relative;
min-width:312px;
background:red
}
I'm trying to center a div with min-width of 312px and make it expand according to its dynamic content while keeping it centered.
Right now the min-with doesn't work at all because it needs a float. I can't use a float because I need the div centered on the page.
In other words, div starts out with margin auto with a width of 312px and expands with its added content while being centered. Is this possible?
Any help would be greatly appreciated.
http://jsfiddle.net/FVmvA/
Here's a working example of the parent to follow the width of the child, and the child will expand according to the text given in it.
.myCoverWrapper {
border: 1px solid Peru;
margin:auto;
min-width: 200px;
max-width: 100%;
display: inline-block;
background: red;
}
.test {
height: 100px;
margin: 10px;
background: cyan;
}
This makes the parent div follow the width of the kid.
This however, will disallow you to "center" it. There's no way you can have both. This is because you cant center an image without knowing the width of the element.
The solution is to use jQuery, to add CSS in when necessary.
Here's an example. There's some bugs, but well, you have the general idea.
If you want the width to be fluid, your best bet is to set display: inline-block; on the to-be-centered element, and text-align: center; to the parent element.
See: CSS center display inline block?
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;
}
`;
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;
}
}