Vertical Alignment for Divs |
Vertical Alignment for Divs |
Gumbor |
Feb 10 2014, 12:22 PM
Post
#1
|
Group: Members Posts: 2 Joined: 10-February 14 Member No.: 20,338 |
Hello everyone, I've got this:
Fiddle But what I want to accomplish is 3 small squares where the fiddle shows, middle div height is the same as the 3 stacked and width 300px and then on the right side of the middle div, similar to the left side with other 3 div boxes stacked... So there's a total of 7 divs, 3 left stacked, middle big and 3 stacked on the right of middle div. What am I doing wrong? I've been meddling around but I just come up with moving around the middle div horribly and messing the structure... HELP! please This post has been edited by Gumbor: Feb 10 2014, 12:24 PM |
pandy |
Feb 10 2014, 12:31 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Afraid you lost me there. Take it again please and slowly this time.
Here's the markup anyway. HTML <div id="div1" style="width: 100px; height: 100px;float:left;background-color: brown;"> (div1)</div> <div id="bigdiv" style="width: 46%; float:left;background-color: green;">middle div</div> <div id="div3" style="clear:left; width: 100px; height: 100px;background-color: red;"> (div3)</div> <div id="div4" style="width: 100px; height: 100px;background-color: orange;">(div4)</div> <div id="div5" style="float:right; width: 100px; height: 100px;background-color: red;"> (div5)</div> <div id="div6" style="float: right; width: 100px; height: 100px;background-color: orange;">(div6)</div> |
Gumbor |
Feb 10 2014, 01:17 PM
Post
#3
|
Group: Members Posts: 2 Joined: 10-February 14 Member No.: 20,338 |
Afraid you lost me there. Take it again please and slowly this time. Here's the markup anyway. HTML <div id="div1" style="width: 100px; height: 100px;float:left;background-color: brown;"> (div1)</div> <div id="bigdiv" style="width: 46%; float:left;background-color: green;">middle div</div> <div id="div3" style="clear:left; width: 100px; height: 100px;background-color: red;"> (div3)</div> <div id="div4" style="width: 100px; height: 100px;background-color: orange;">(div4)</div> <div id="div5" style="float:right; width: 100px; height: 100px;background-color: red;"> (div5)</div> <div id="div6" style="float: right; width: 100px; height: 100px;background-color: orange;">(div6)</div> Ok, So you saw the result? There's 3 squares vertically aligned. div 1,2 & 3. The position of them is good. Now there's mid div, which I want its height to take the same as the other 3 divs(which for now I can't accomplish). and a width of 300px(just a number). and the tricky part. Mirroring div 1,2 & 3 (being div 5,6,7) on the other side of middle div. I hope I explained myself better hahaha |
Lo-Fi Version | Time is now: 17th April 2024 - 05:59 AM |