A question about CSS and DIV alignment?
I have a question about CSS and the alignment of DIVs. I really thought I had my head wrapped around this and just when I did I feel as though…I know nothing sigh. I am working on my portfolio site and to my understanding DIVs will place each other next to one another unless forced beneath one another due to width/room. Much like when you are typing online and you run out of room so the text goes to the next line and you continue typing.
Well I have a couple of divs:
CONTAINER
LOGO————-
CONTENT—
BOX 1 BOX 2 BOX 3
——text————
BOTTOM/FOOTER IMAGE (div img BG)
Now everything if going great except that bottom/footer is just shooting all the way up to the very top of the page and I have no idea. I have read and re-read my code trying to sort out the problem and come up with nothing. Maybe someone can help me, or teach me the error of my ways?
I just started working on it but basically I want that content section to have like an auto height and just kind of stretch down as long as it needs with that bottom image also staying right below it.
http://lyonsdesign.info/test/ld/portfolio.html
Observing members:
0
Composing members:
0
4 Answers
Drop a
clear: both;
on your div for the footer/bottom.
#bottom {
background:url(“images/bottom.png”) no-repeat scroll 0 0 transparent;
clear:both;
height:21px;
position:relative;
width:959px;
Actually, it is about the opposite of that. Divs are block-level objects, as are Headlines, and Paragraphs. A block level element takes all the width of its containing element and uses as much vertical space as its content require unless told otherwise by css. For instance, If I have a
<body style=“width: 100%;”>
<h1>Gallery</h1>
<div id=“a”><img src=“a.jpg” widht=“100” height=“100”></div>
<div id=“b”><img src=“b.jpg” widht=“100” height=“100”></div>
<div id=“c”><img src=“c.jpg” widht=“100” height=“100”></div>
</body>
I will end up with an H1 heading sitting on top of a column of left-oriented 100×100 pixel images. The page will be as wide as the screen (1440 pixels on my machine) because of the width statement in the body tag. The H1 tag and DIVs will all be that wide as well, even though the contents they hold doesn’t need that width. If I want to line the divs up horizontally, I need to use CSS to change the game.
For instance, I could write:
<body style=“width: 100%;”>
<h1>Gallery</h1>
<div style=“float:left;clear:left;width:120px;”><img src=“a.jpg” widht=“100” height=“100”></div>
<div style=“float:left;clear:none;width:120px;”><img src=“b.jpg” widht=“100” height=“100”></div>
<div style=“float:left;clear:none;width:120px;><img src=“c.jpg” widht=“100” height=“100”></div>
</body>
That would narrow each DIV down to 120 pixels. I’d get a nice 20 pixel white pace between images, and all my narrow divs would float over against one another. Just remember to Google how to break floats, because floating elements tend to intefere with block elements following them if the floats aren’t broken.
Note that there are other ways. I could use style=“display: n-line;” to make DIVs behave like in-line containers such as SPANs, but the width and float gives me more control.
@johnpowell so weird..that is exactely what I though was the problem and I tried that earlier and it didn’t work and just tried it now and it worked fine..I don’t get it but thank you!
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
