jnf555 Posted February 10, 2011 Share Posted February 10, 2011 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">*{padding:0;margin:0;}#container{width:960px;background-color:silver;margin:0 auto;overflow:hidden;position:relative;}#box1 {width:24.79%;height:160px;background-color:blue;margin:1px;color:white;float:left;}#box2{width:49.7%;height:322px;background-color:blue;margin:1px;float:left;color:white;}</style></head><body><div id="container"><div id="box1">1</div><div id="box1">2</div><div id="box1">3</div><div id="box1">4</div><div id="box1">5</div><div id="box1">6</div><div id="box2">7</div><div id="box1">8</div><div id="box1">9</div><div id="box1">10</div><div id="box1">11</div><div id="box1">12</div><div id="box1">13</div></div><!--container end--></body></html>hi can somone show me how to put the number 6 box under the number 5, i tried taking away the float left for that box, which put the number 6 in the right place and the box color behind another onethanksjnf555 Link to comment Share on other sites More sharing options...
thescientist Posted February 10, 2011 Share Posted February 10, 2011 it's not correct to repeat ID's, that's what classes are for.you could put the next line of floated elements in another block level elements (like a <div>) to start the next line of floated elements on a new line. Also, you might want to recheck your math if you're trying to line up five elements each with a width > 20%. Link to comment Share on other sites More sharing options...
jnf555 Posted February 10, 2011 Author Share Posted February 10, 2011 thanks for replythe idea was to have 4 equal boxes along the top and bottom and sides with a large one in the center.thanksjnf555 Link to comment Share on other sites More sharing options...
cousineaug Posted February 11, 2011 Share Posted February 11, 2011 thanks for replythe idea was to have 4 equal boxes along the top and bottom and sides with a large one in the center.thanksjnf555ok I thought that was what you wanted. First the lesson, then one solution.Your frame is a fixed width 960px. then you try to divide it by 25% but actually a bit less to allow for the 1 px border. Why do all that hard arithmetic if you know 1/4 of 960 is 240 (238 when you allow for the margin. If this is a test and you later want to have a fluid container then do the hard math...but accept that rounding errors will make it line up a bit crooked.I see you already got the comment about the ID so I will skip that.The reason the text was going in one place and the COLOUR elsewhere is that you did not clear the floats before removing the float from box 6. Regardless, with the layout you had, I could not find an easy way to line everything up.So what I did was take box 6 out of the stream and position it afterwards:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">*{padding:0;margin:0;}#container{width:960px;background-color:silver;margin:0 auto;overflow:hidden;}.box1 {width:238px;height:160px;background-color:blue;margin:1px;color:white;float:left;}.box11 {width:238px;height:160px;background-color:blue;margin:1px;color:white;clear: both; /*clear the floats*/position: relative; /*make it moveable*/top: -324px; /*bring it up 2 blocks*/}.box2{width:478px;height:322px;background-color:blue;margin:1px;float:left;color:white;}</style></head><body><div id="container"><div class="box1">1</div><div class="box1">2</div><div class="box1">3</div><div class="box1">4</div><!--six will come later--><div class="box1">5</div><div class="box2">7</div><div class="box1">8</div><div class="box1">9</div><div class="box1">10</div><div class="box1">11</div><div class="box1">12</div><div class="box1">13</div><div class="box11">6</div></div><!--container end--></body></html> another way using this layout is to enclose boxes 5 and 6 in a div 240 wide by 320 high "float left"...however, imho, it would have been easier to define 3 columns, the first 240 wide float left, the second 480 wide float left and the third 240 wide "normal flow".then in column 1 you insert 1-5-6-10in column 3 you insert 4-8-9-13and in the middle column you float the remainder of the cells.with either option you do not need to PUSH one into place....more than one way to get to Toledo...Guy Link to comment Share on other sites More sharing options...
jnf555 Posted February 11, 2011 Author Share Posted February 11, 2011 wow! sound like i made hard work of settimg a page layout.thanks alot for your help i take on board what you have said.thanks againjnf555 Link to comment Share on other sites More sharing options...
cousineaug Posted February 12, 2011 Share Posted February 12, 2011 I gave some thought to the 3-div solution so I had to check it out. It actually came out nicely with one little glitch. When I define the width of column 3 it also needs to float left. But if you just let it fill the rest of the container you don't even need to define it. As a matter of fact you can remove DIV RIGHT from the HTML as well. It is just neater to have the three containers defined. Tested in Opera, FF, Chrome and Safari. <html><head><style type="text/css">*{padding:0;margin:0;}#container{width:960px;background-color:silver;margin:0 auto;overflow:hidden;}div.left{width:240px;float:left;}div.middle{width:480px;float:left;}/*no definition required for right div it will fill the rest of the container*/.box1 {width:238px;height:160px;background-color:blue;color:white;float:left;margin:1px;}.box2{width:478px;height:322px;background-color:blue;margin:1px;float:left;color:white;}</style></head><body><div id="container"><div class="left"><div class="box1">1</div><div class="box1">5</div><div class="box1">6</div><div class="box1">10</div></div><!--end left--><div class="middle"><div class="box1">2</div><div class="box1">3</div><div class="box2">7</div><div class="box1">11</div><div class="box1">12</div></div><!--end middle--><div><div class="box1">4</div><div class="box1">8</div><div class="box1">9</div><div class="box1">13</div></div><!--end right--></div><!--container end--></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.