I am trying to align some divs a certain way. To help debug what's happening, I decided to add borders to the divs to research how they were getting positioned. But the border looks pretty strange.
Here's the html:
Here's the CSS:
And here's the result:
What am I doing wrong? Thanks!
It isn't funny (!!). The div appears to have 0 height, hence the top and bottom borders are touching each other, creating a funny (??) appearance.
The div appears to contain content but the content is probably floated or absolutely positioned, therefore it does not stretch the funny (!?) div vertically.
demo here
Height is one way to do it, but its a bit hackey, another is to float the div that is surrounding other floated divs:
http://jsfiddle.net/Ewd4x/2/
Related
I have a layering issue with a site that I can't seem to figure out how to get around.
Essentially, I have a float:right div that contains some linked images and a bunch of block divs on the same page (in the same wrapper). The text (content) all wraps as expected, but the block elements overlap the floated elements making the image links non-clickable. It becomes quite obvious when viewed using chrome/firebug/whatever that the blocks are getting in the way of the floats but nothing I have tried as yet has floated them to the top.
example from: http://wanganuilibrary.recollect.co.nz/nodes/view/280
What I need is a way of allowing the links on the images in the float to be clickable. The float can have a set width but not height, and the rest of the content needs to be free flowing and wrap under the float if/when required, so no forced padding or margins, e.g.: http://wanganuilibrary.recollect.co.nz/nodes/view/1519
Any ideas on how this could be achieved would be appreciated.
Usually columns like this are built using floats.
The left content column would be float: left with a set width.
The right content would be float: right with a smaller width.
Otherwise you can set the z-index of the anchors around the images to higher than the other content,
I need to place two repeated background images on the left and right border of a div. I don't know the width or the height of the div.
I though of placing the left border in the div, and floating the right border to the right.
This is my layout:
http://jsfiddle.net/WmLhV/
In Firefox it works ok, but in the other browsers, when the browser window is too short, and a scrollbar appears, the float disappears.
As you can see the container is of display: table-row. I cannot change this or the layout will break...
Is there any better way of putting an image to the right? even without a float?
your div with right align doesn't have height if you want to use 100% height you have to use position. check this fiddle i have done this via position http://jsfiddle.net/WmLhV/4/
Your <div> that's floated to the right doesn't have height. Firefox seems to understand the 100% height even when the contents of the <div> are empty but IE9, for example, doesn't.
One alternative approach would be to give your <div> that contains the text 60px padding-left and 60px padding-right, and then apply background images to it (note: multiple background images will only work in CSS3-friendly browsers). The padding essentially creates empty space for the your background images and always has the same height as the text.
A further, slightly more convoluted approach, would be to divide the inside area into three (left, middle, right) and setting display: table-cell (or using a table), and then essentially allowing the height of the left and right cells to adjust according to the height of middle cell which contains the text. This would reveal the background images on the sides according to the height of the middle text --- standard table behaviour. This would get rid of the need for floats. display: table-cell is not supported in IE6/IE7, but a normal HTML table would work fine.
Ok, I have finally got my divs to sit nicely side-by-side in a parent div.
But....I can not seem to put a margin between them. Sample of code is here. The two ids/divs in question are importInfo and newDevelopment. Both are absolute positioned with tops at 0 and left/right at 0 (respectively), widths at 50%. These two divs need to be fluid so that they extend vertically when the user adjusts their browser window horizontally. I need someone to point out my dumb mistake.
That's because they're not positioned correctly. Margins, padding, and border are by default not included in the calculation of the box's width. This is how your box actually appears on the page:
You really shouldn't be using absolute positioning for something as simple as this. Try setting both of the boxes as display: table-cell instead or find another more suitable solution to position the boxes next to each other.
I have a website built with divs floated to various parts of the pages to create the look I want. My problem is, when I make my browser smaller the floats all cram to the left side instead of holding their positions and simply giving a scroll bar.
All I want is for my pages to hold their form when the browser is not maximized.
I suggest you put a min-width on the div wrapping all your floating divs.
Than all your div will be floating as normally, but when the browser will be smaller you will have a scroll bar.
Yeah the code would really help, but a solution (I think) would be to wrap all your floated divs in a div that has a defined width.
I have a div box (absolutely positioned), which is expandable and below that I have another div box non-expandabe (relatively positioned).
Now when that absolutely expandable div expands, the one below that dosen't shifts down.
Is this not possible ?
Had my code been not too long, I would have placed it here... Can anyone help me on this..
When you absolutely position something it removes it from the flow the document, so it just overlaps stuff and doesn't push anything out of the way. Perhaps the first div doesn't need to be absolutely positioned?