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.
Related
I have a question on something weird that is rendering on the latest IE and Chrome browsers. I have a div that is supposed to span 100% of a parent. So clumsily, I gave it - width: 100%px; as a CSS property. Here is my entire item:
.loc_vendiv{
position: relative;
margin-top: 5px;
left: 0px;
width: 100%px;
height: 120px;
border: 1px solid #333;
background-color: #fff;
}
The weird thing - that worked perfectly. So much so, that I just noticed today that this was wrong. Not wanting an ugly style sheet, I removed the px from the end. And... the div was two pixels too wide. Any explanation as to why this is happening? Here is the parent div:
#loc_catlist{
position: absolute;
width: 612px;
height: 720px;
top: 50px;
left: 0px;
background-color: #eee;
overflow-y: auto;
overflow-x: hidden;
}
I'm mildly annoyed, as the bad code works, yet the correct code doesn't do what I want. I don't think I can leave it, though. I don't like little hiccups like this...
It's because of your border.
Try adding :
box-sizing: border-box;
to your .loc_vendiv class, it will take the border in account.
Browsers usually ignore invalid css rules like width: 100%px; which means that to get the style you had with the mistake. you only have to remove the width rule.
2px too wide is likely caused because you have a width of 100% in addition to a border of 1px (all around adds up to 2px width).
A fix can be found here from "Paul Irish" about
box-sizing
what happens is that when the width value is wrong (100%px;) this part of the CSS is simply ignored by the browser. If this part of the css was deleted, the result would be the same.
About the 2 extra pixels, this happens because of the border set to the div.loc_vendiv.
The width of div.loc_vendiv is equal to the width of div#loc_catlist and to this is added the border value (1px for the left border and 1px for the right border = 2px).
Remember that the border width is added to the size of the object while the padding creates an internal space.
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
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.