I know that is a popular problem, but I really ca't find a solution..
here my jsfiddle
http://jsfiddle.net/vUqer/
As you can see, the
div id="layoutdueColonne"
go outside the
div id="content"
Why?
Thank you very much!
You don't need the height and min-height in content and layoutdueColonne. When you remove them and add
#content
{
background-color: white;
overflow: hidden;
}
You will see both sq1 and sq2 inside content.
JSFiddle
The float left and right for sq1 and sq2 causes this problem. As workaround, try to combine the two tables into one table or just accept the two tables to be vertically arranged.
Does adding
overflow:scroll;
to your content div solve the problem, or am I missing something else?
http://jsfiddle.net/vUqer/2/
Related
I have a left floated div and the div after it is spanning over the left floated div.
Look here http://www.kienitz.it/kienitz_cms/referenzen/.
I want to have it like this: http://www.kienitz.it/kienitz_cms/testtt2/.
This is all in wordpress and this last example I made with the onethird and onethirdlast shortcodes. Don't know what happened.
Any help greatly appreciated. Thanks!!
Regards.
Checked your websites
Actually i didn't understand wot chage is you needed
But just try this ... need to change the CSS property float:left to right of Class 'firmen'
.firmen {
float: right;
width: 450px;
}
I'm using a two column layout with a sticky footer.
I'm trying to make the sidebar use 100% height, even when there's not much content on the page.
I've used two techniques to do this. The first is a CSS sticky footer (http://www.cssstickyfooter.com/) and the second is faux columns (http://www.alistapart.com/articles/fauxcolumns/).
Faux columns is working well to keep two columns equal height, and to expand either one as required.
My challenge is that if you look at this example (http://visuals.customstudio.co.uk/atc/sidebar/) you'll see that the sidebar is not extending to the full height of the page.
I've tried another technique as detailed here (http://stackoverflow.com/a/6838338/557002), which you can see here (http://visuals.customstudio.co.uk/atc/sidebar/about.html) but this means that if the sidebar has more content that the main area, it's not seen.
Any ideas of how I can make both columns increase the page height as required, and extend all the way to the footer will be massively appreciated.
Thanks in advance,
Tom
I think I know what you mean - but the solution deviates from faux columns. I think you want to make the right column will always appear to fill the vertical height of the inner container.
To do this just use the background image on the <div id="outer" /> element. Like so:
#outer {
url(../images/faux-columns.png) repeat-y center top;
}
Hope that helps!
what about giving your .main-centre a min-height ? i don't know if i get you right but this looks good for me.
btw many of your paddings and margins are obsolete and could result into cross-browser problems.
I think that the problem as with your about.html is with this css code:
.main-wide {
overflow: auto;
padding-bottom: 266px; /* footer height */
}
When you tried to extend your sidebar it is hidden by the overflow of .main-wide try with giving custom width to the sidebar and main-wide, for example:
.main-wide {
width:75%; //or whatever you want in ratio or pixels
overflow: auto;
padding-bottom: 266px; /* footer height */
}
and
.sidebar{ //any sidebar class
width:25%;
min-height:300px; //or as your wish
}
P.S. : I am not a professional web developer, but have little knowledge. Hope it will help you.
I have the following problem. Somehow, the margin-bottom of .item (should be 15px) doesn't work for the last item in .box. See the jsfiddle: http://jsfiddle.net/WVP3D/
It might be a basic question, but i've been looking for a solution and couldn't find it. If anyone has the time to help me out, your help is really appreciated.
It is working. There's a space between the grey item divs, that's the bottom margin.
You can add bottom padding to the box div if you want the lighter grey below the items. Even just 1px padding works (FIDDLE HERE) Because then, when padding is added to the box div which must occur after the clear div it forces the margin on the item div to be seen by the parent (box).
Try adding padding-bottom:15px; to .item
Add display: table; to your .box class
.box {
...
display: table;
...
}
Check this fiddle: http://jsfiddle.net/GnHuJ/1/
Floating the container element (.box) should give you what you want, as can be seen on this jsfiddle
I'm having a problem with divs not expanding vertically where there are anchors with padding inside.
Since the explanation is not the best one, I've recreated problem here: http://jsfiddle.net/uF6KN/3/
Basically, I want blue anchors to have to same top coordinate as a blue button. I've tried somethings but got stuck. Any help would be appreciated.
I not really that proficient in CSS so I might be missing a simple thing.
Thanks!
#d_float_right a {display:inline-block;}
a {
float: right;
}
should fix it. changing the a from a inline to a block element. Setting display:block on a would also make it a block element but would put each on a newline
#d_float_right a {
display: block;
float: left;
}
I'm sure the answer is obvious, but I haven't been working with html/css that much...
There is a gap of white space in between the top of the browser and the first div. I don't really get why the gap is there. I didn't use margin-top or padding-top or border-top in the css, so why is there a gap?
Thanks!
While it would be extremely helpful if you actually posted some code or a link to the site, I would assume it's just the default padding. Most browsers have default styles for things like body that you may want to clear. Try something like this:
html, body{
padding: 0;
margin: 0;
}
If that doesn't fix it you'll need to give more information.
Without seeing anything I'd imagine you either need to clear the default padding on the body element or you have a heading tag in that div that is adding some extra goodness.
Are you using a reset? http://meyerweb.com/eric/tools/css/reset/
if the page is wrapped with a wrapper, use:
#wrap{
margin:0 auto;
padding:0
}
Once again, some context would be nice but if these solutions aren't cutting it, then there's a good change your a victim of collapsing margins. Try setting the overflow property of the body to auto
I had the same problem. Floating the upper divs solved it.
I had the same problem. It was fixed when I added 30px of padding to my div container. I used
.top-container {
padding-top: 30px;
}
My problem happened after I set some images to an absolute position in my div (which had a position of relative.) For some reason that gap appeared, but setting the padding worked for me.
I know this is 9 years old but...
body { margin:0; }
type that in between the Tags and it should work