Well I have 3 div's floating next to eachother. And the 3 divs are in a bigger div with background image.
Now are the left and right div 600px in height and that is set and the middle (container) is auto height. But I want the background of the 3 divs always to be the same height as the left and right div dut it only scrolls with the middle div.
Maby I can't explaine this correct so if you could take a real quick look at the website.
This is when its correct with lots of content:
Good
This is the incorrect page...
Bad
I'm guessing its not something big and I dont know what coding to post here so to overcome lots and lots of coding here maby this is better if you could take a quick peek.
Thanks!
Add overflow: hidden to the #mainbg div
#mainbg { overflow: hidden; }
try add:
<div style="clear:both;line-height:0"></div>
after the last div.
edit: i don't watch to the source code first so a little bit change...
create a new div into mainbg and add all 3 middle part divs in it
then you can use clearing div after this one.
Related
I have 6 floating divs (align to left) on a page. These divs has 2 different widths (depending the image () ). One div has 295px and the another has 216px. The height is calculated automatically by HTML. The container has 1050px, so in one "line" of the container I can insert 3 divs, and the another 3 on the second "line".
The CSS rule is working, all divs are floating to the left, each div has 20px margin, but the problem is the alignment of them. I want to align these divs proportional. At the moment if some pictures has different heights, on the second "line" are some blank spaces (because the height of the pictures above).
I want something to float these divs on the Y coordinate (proportional).
Look at this pictures:
Make a jsfiddle for people to play with.
But, you will probably want to make a container div for each row. This encapsulates the 3 inner divs, being as high as them and allowing the next container to fit nicely underneath
See my fiddle: http://jsfiddle.net/TJxmT/
Wouldn't a min-height at the floating divs solve the problem?
Try to use jQuery plugin called Masonry to fix that layout... You will be surprised!
EDIT:
You can always clear the 1st item in the row and every third item using css :
li:nth-child(3n+4) { clear:left; }
Have you tried putting a clear: both; on every first div of a new line?
I have a webpage with links down the left hand side of the page in a div that is floating left. I then have content to the right of that that is in a div floating right. The problem I'm having is that when the page is resized the content moves below the links.
I have tired putting the whole page in a wrapper div but when I did the links stopped working and I could not position the content where I needed too.
Here is the css for the wrapper div
#wrapper {
margin:0 auto 0 auto;
min-width:960px;
}
Floated elements will behave in that manner, since they're out of the page flow.
What you probably are looking for is a fluid two column layout.
The main problem is that you are giving the divs fixed widths so the first step is to change the widths of the divs to % or em.
Do this full screen to begin with, I would even go as far as creating a blank page with no content what so ever, just give the divs a different background colo(u)r. Do this as you then know the width of the content isn't interfering.
I would also float both divs to the left and maybe position them relatively to begin with.
I figured out the best way to go over the window resize issue is do like wordpress and even this site do: put balnk resizable margins around the page and make all the content fixed width.
"Liquid" style (with percents etc.) is cool but doesn't really look right most times, so the best thing is to build your page a little narrower than the full window and let different brawsers just change the margin size.
To do so I actually style the very html tag givin it a fixed width like 1000px or whatever and then margin-left:auto; margin-right:auto; to keep it always centered.
EDIT:
Put this in your css
html {
width:66em;
margin-left:auto;
margin-right:auto;
}
I have a page with some divs that have a width of 800px and margin: 0 auto
to center them.
One of the divs contains an image and the rest of the div is empty, in IE8+ it looks
as well as all other browsers, but in IE7 the empty area of the div takes space and throws other elements off their place,
is there a quick solution for making the empty area of the div not take space?
the reason I have to keep the blank area is that the fixed with and margin: 0 auto make
the picture align with the other divs that have the same width.
thx in advance!
Try setting line-height:0 and font-size:0 for that element.
It should make the element occupy no space..
just wanted to tell anyone reading this post, what I did in the end is put an Internet Explorer conditional comment as nothing seemed to solve the problem.
another thing that is possible is to make one of the DIVs' position absolute and then it's
outside the normal flow, but I couldn't find a way to make the empty part of the DIV not take
space in the normal flow.
Yes it does...just put ; after them
I just had the same problem on IE7 and used the answer
line-height:0;
font-size:0;
in the CSS corresponding to that div
I have a div-layout on my asp.net page.
Left a div for menu, middle a div for content and right a div for a online user list.
All divs are with float:left and height/width on his place and it works problemless.
Now I must have a advertise over the left and the middle div together.
My first try was to have it in the middle and set margin-left:-270px;.
But the the advertise-div is OVER the menu and you cant click anything anymore.
My second try is to have it in the left div and overflow it easyly on the middle div, but that of course don't work, because the left menu div has a width: 300px; and exacly there end the banner.
here is it to see:
http://s3.imgimg.de/uploads/4b247298bJPG.jpg
how to do?
It's hard to tell without seeing your HTML/CSS, but perhaps the easiest way would be to to put the advert in it's own <div> under all of the left, middle, right divs, and use something like margin-top: -110px to shift it up.
It's not a very clean solution. If you can't get this to work, or just plain don't like it, then post your code.
I have an issue (code is dynamic so difficult to print - I hope this is simple) whereby when a parent container div contains 3 div elements floated left, yet the if the 3rd div goes beyond the body of the page (i.e. the browser's width) it line breaks to go underneath.
I want it to float: left whatever, whether it goes past the 'end of the browser' or not. Is this possible?
Example code:-
<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>
Where all the divs left, center and right are float: left;
Yet #divLeft will break to go under divCenter if it's width goes outside the browser width.
Any help much appreciated!
The best way to be sure is to set a fixed width to your div here.
An example here
#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}
Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.
it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.