johnsmith153 Posted October 2, 2008 Share Posted October 2, 2008 I need my divs laid out like this (see code below where I have got it very close) xxxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxx xxxxx xxxxx xxxxx xxxxx xx xx xx xx Also, when I add the javascript I have got, I can open and close these divs, so the css needs to allow them to open and close and move together. If all were closed they would sit neatly together. ( I have got all js, just need these to align up to start with) This is the best I could do so far: (put it isnt quite straight) <div style="width:650px;height:30px;background:#CCFFFF;border:#0099FF;thin;border:#333333;"> ff </div> <br /> <div style="width:650px;height:30px;background:#CCFFFF;border:thin;border:#333333;"> ff </div> <br /> <div style="width:650px;height:30px;background:#CCFFFF;border:thin;border:#333333;"> ff </div> <br /> <div style="width:310px;height:30px;background:#CCFFFF;border:thin;border:#333333;"> ff </div> <div style="margin-left:340px;height:30px;background:#CCFFFF;width:310px;border:thin;border:#333333;"> ff </div> <div style="width:310px;height:30px;background:#CCFFFF;border:thin;border:#333333;"> ff </div> <div style="margin-left:340px;height:30px;background:#CCFFFF;width:310px;border:thin;border:#333333;"> ff </div> <div style="width:155px;height:30px;background:#CCFFFF;border:thin;border:#333333;"> ff </div> <div style="margin-left:165px;height:30px;background:#CCFFFF;width:155px;border:thin;border:#333333;"> ff </div> <div style="margin-left:330px;height:30px;background:#CCFFFF;width:155px;border:thin;border:#333333;"> ff </div> <div style="margin-left:495px;height:30px;background:#CCFFFF;width:155px;border:thin;border:#333333;"> ff </div> Quote Link to comment Share on other sites More sharing options...
xtopolis Posted October 2, 2008 Share Posted October 2, 2008 I got them to line up properly, at least in FF2, IE6 [haven't tested other browsers]. FYI this layout is not perfect, but a good start. yourpage.html <html> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <!-- top 1 x 3 --> <div class="long"> ff </div> <div class="long"> ff </div> <div class="long"> ff </div> <!-- middle 2 x 2 --> <div class="medium"> ff </div> <div class="medium" id="right"> ff </div> <br /> <div class="medium"> ff </div> <div class="medium" id="right"> ff </div> <!-- bottom 4 x 1 --> <br /> <div style="width:155px;height:30px;background:#CCFFFF;border:thin;border:#333333;"> ff </div> <div style="margin-left:165px;height:30px;background:#CCFFFF;width:155px;border:thin;border:#333333;"> ff </div> <div style="margin-left:330px;height:30px;background:#CCFFFF;width:155px;border:thin;border:#333333;"> ff </div> <div style="margin-left:495px;height:30px;background:#CCFFFF;width:155px;border:thin;border:#333333;"> ff </div> </body> </html> test.css html {height: 100%;} *,body { margin: 0; padding: 0; text-align: left;} br { clear: both;} div.long { width:650px; height:30px; background:#CCFFFF; border: 1px solid #333333; margin-bottom: 15px; } div.medium { width:310px; height:30px; background:#CCFFFF; border: 1px solid #333333; float: left; margin-bottom: 15px; } div.medium#right { margin-left: 30px; } Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 2, 2008 Author Share Posted October 2, 2008 Great, Thanks. Except the bottom 4 are not aligned. Quote Link to comment Share on other sites More sharing options...
xtopolis Posted October 2, 2008 Share Posted October 2, 2008 I forgot to put that while posting.. btw, the bottom 4 are not aligned, I left those for you to do. Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 2, 2008 Author Share Posted October 2, 2008 Can anyone else give me a hand with this? I have tried using the same method, (float:left) but it doesn't seem to work. Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 2, 2008 Author Share Posted October 2, 2008 I suppose you couldn't do the bottom row either. There is definitely something different needed if you try to do the bottom row. Other than a load of <br>'s it doesn't sit perfectly like the others. Quote Link to comment Share on other sites More sharing options...
xtopolis Posted October 2, 2008 Share Posted October 2, 2008 In the 5 minutes I took to write that, I couldn't. But I assume with them being placed inside another div with position relative on it, I could get it to work. I have done it before in other contexts, so I know I can do it. It's time for you to learn. Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 2, 2008 Author Share Posted October 2, 2008 "In the 5 minutes I took to write that, I couldn't." I wish you would have said that from the start, I assumed you knew what you were doing. What it needs is this: <br style="clear: both;" /> In the words of a CSS beginner it basically stops the line of floats so you can start again. What I had was the bottom row of 4 assuming they were connected to the middle row. All align-top attempts was going from that line. So it basically needs float:left across each row, with the above command to move it to the next row. Thanks for posting in the first place, nobody else was available - some help is better than none. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.