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> Link to comment https://forums.phpfreaks.com/topic/126702-simple-for-anyone-who-knows-about-css/ 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; } Link to comment https://forums.phpfreaks.com/topic/126702-simple-for-anyone-who-knows-about-css/#findComment-655318 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. Link to comment https://forums.phpfreaks.com/topic/126702-simple-for-anyone-who-knows-about-css/#findComment-655333 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. Link to comment https://forums.phpfreaks.com/topic/126702-simple-for-anyone-who-knows-about-css/#findComment-655336 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. Link to comment https://forums.phpfreaks.com/topic/126702-simple-for-anyone-who-knows-about-css/#findComment-655346 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. Link to comment https://forums.phpfreaks.com/topic/126702-simple-for-anyone-who-knows-about-css/#findComment-655395 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. Link to comment https://forums.phpfreaks.com/topic/126702-simple-for-anyone-who-knows-about-css/#findComment-655402 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. Link to comment https://forums.phpfreaks.com/topic/126702-simple-for-anyone-who-knows-about-css/#findComment-655411 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.