I want to nest a div inside another div so that the outer div grows with the inner div as the inner div has text placed inside it. Would appreciate any help. Here is a link so you get the idea. You will need to open your browser up to full screen to see the bottom of it correctly.
Hello Slalvenko, Have posted up both your code (thank you kindly) and my code which I know is not perfect but I'm learning. Yes I am aware of css reset styles that set browser default values to 0 and I did download one once. But I'm hoping that in a years time I will be aware of all of this and just write it into my code. I suppose a reset saves time and trouble but I'm enjoying pottering around what with all of this being new to me. Here is your code and my code. Mine is slightly different because I was wanting to add two more divs to it later which I will show you when I get there. Mike http://www.hnw7.com
.outer {
background-color: #CCF;
margin-top: 0px;
right: 0px;
margin-right: 0px;
bottom: 0px;
margin-bottom: 0px;
}
.inner {
width: 535px;
background-color: #E6E6FF;
color: black;
padding: 20px 50px 20px 50px;
overflow: hidden;
margin: 0 auto;
}
I'm not sure if this was your question but try this. The floats in your .inner div are making the parent's height 0, since the floats take those elements from the document flow. You need to clear those floats if you want your parent to have actual height. I find that easiest way to do so is to add overflow:hidden; to the parent element.
You can read about clearing floats here
Related
Long time learner, first time poster.
Here's my dev site: http://kcyc.webstuffdepot.com
I'm using a bit of jquery to add a class - 'sticky-header' - to the header of the site. Sticky-header makes the header scroll with the user. Here's my CSS:
.sticky-header {
z-index: 99999;
position: fixed;
width: 100%;
border-bottom: 1px solid #ccc;
min-height: 60px !important;
background: #fff;
}
I've used this setup many times with the same Genesis theme and it's been great. With this application, however, something weird is happening. As you scroll, the header flickers in and out, interacting with elements below it.
The part of the header that blinks in and out is always consistent, as though it is being interrupted by an unseen page element. I can't find any page element that is consistent throughout the site that would be causing this behavior.
I'm wondering if you fine fellows could point something out to me, or know some aspect of the CSS I'm trying to use that's causing confusion in the display.
You would have to set the width and position on your wrapper div as well because you are floating your aside and setting it at a width of 50%.
Since the wrapper div does not have a set width, the wrapper doesn't know what width to take (50% of what?). The wrapper div also needs to be relative to the header position to inherit the z-index. I used the below code and it fixed the problem.
.sticky-header .wrap {
padding: 10px 0px;
width: 100%;
position: relative;
}
I have here a code in Dabblet: http://dabblet.com/gist/5705036
I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].
Is there something wrong with my coding?
Do floats proper for layouts ? or I need to use anything else?..
I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]
Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.
Here is the code.
#maincontent {
border: 1px solid #BBBBBB;
border-radius: 5px 5px 5px 5px;
display: table-cell;
margin-top: 15px;
min-height: 400px;
padding: 2px 6px;
width: 700px;
}
Hope this helps.
First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:
#contentWrapper {
width: 1000px;
overflow: hidden; /*scroll / auto it's depends on You */
}
I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.
#contentWrapper {
width: 992px;
}
Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?
So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.
I have an image with float:left, and I’d like it to overflow its parent, but cut off the overflow. Here’s what it looks like without any overflow rules:
Here’s what I want:
Here’s a fiddle: http://jsfiddle.net/ZA5Lm/
For some reason, it was decided that overflow:hidden without an explicit height results in the element growing.
Can I somehow achieve the effect I’m after without setting an explicit height? An explicit height doesn’t work because I want this div to size automatically based on content length and browser width.
In my opinion using overflow: hidden without setting dimensions doesn't make sense. If you don't want to specify the height of the container and if your images have a fixed width you could use this solution: http://jsfiddle.net/ZA5Lm/11/
The image is positioned with absolute, taking it out of the text-flow. However - and I'm aware that this may be ugly - you need to specify a padding-left to move the text away from the image.
It's a bit tricky (I use relative + absolute positioning and a specific padding to position text) but it does the effect you asked without changing markup or setting height:
body {
padding: 10px;
}
img {
float: left;
position: absolute;
left : 10px;
}
div {
border: 1px solid black;
padding: 10px 10px 10px 280px;
position : relative;
overflow: hidden;
}
I just inserted style (even if float:left would be no longer necessary)
I seen a post over at CSS-Tricks and it talked about this. Go check it out at -
http://css-tricks.com/minimum-paragraph-widths/
It might be useful :) Good luck
Also just looked at your code and I added float: right to your div so it looks like this -
div {
border: 1px solid black;
padding: 10px;
float: right
/*overflow: hidden;*/
}
Not sure if that's what you want?
I'm pretty rubbish with CSS, I muddle through and rather than bash my head against a brick wall...
www.SchofieldBell.com
I have the book part of the page in the middle by placing everything inside #wrapper:
#wrapper
{
BORDER-RIGHT: 0px solid;
BORDER-TOP: 0px solid;
BORDER-LEFT: 0px solid;
BORDER-BOTTOM: 0px solid;
PADDING-TOP: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 17px;
MARGIN: 0px auto;
WIDTH: 900px;
DISPLAY: block;
POSITION: relative;
TOP: 0px;
}
But I want the left hand side of the page (the bit that's missing) to expand or shrink depending on the screen size...
Any ideas?
First of all, please write CSS-code in all lowercase - so much easier to read. :-)
#wrapper {
width: 90%;
}
Will ensure that #wrapper always has a width equal to 90% of the viewport (viewing area of the browser).
or
#wrapper {
margin: 20px;
}
will ensure that the #wrapper width always is 100% of the viewport, minus 20 pixels on each side.
Did i understand your problem correctly?
It is called elastic or fluid layout, and there is a great article in A List Apart
First off...
Image overload, optimize or something, took a good 5-8 seconds to load
Give the element a 23% width, and a min-height property.
This design isnt fluid at all and is too big for my 1600x1200 screen, reconsider that.
Using a mix of CSS / tables / and iFrames is pretty messy, try to correct that.
Thanks.
Depending on whether I understand your goal correctly, this might be worth a try: Place the div within #wrapper and position it c. 900px from the right side of the wrapper. I assume your intent is to overflow the text off the left hand side of the page.
Eduardo mentioned A List Apart, however, I think this article on that site might be more appropriate (as it seems to be exactly what you want).
2 columns, liquid, fixed right
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.