[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 273
  • Last Modified:

<div> css instead of <table>

Please see the attached image to follow these four items:

- There are total of 8 sections only. Box 5 doesn't include 3 subsections.
- The vertical dash lines are to help to see box 5 x 2/3 = box 6
- Box 6 is smaller than box 5 in the proportion shown.
- Center-line of box 2 and the center-line of box 6 must match.

In the image, I have included user-friendly names for each section. I appreciate if you could use them as well adding any required format names you need. This will be help me to follow your code better.

Could you please put together, a html/ css code to accomplish this?

Thank you.

Also, when I tried, I see there is a major problem with the code as shown on the attached image. How can I correct this?

section 2 (gap) is one &nbsp while section 6 (middleButton) is much wider.

section
1  40%
2 &nbsp
3 40%
4 15%
5 30%
6 ~20%
7 30%
8 15%
table.png
0
Mike Eghtebas
Asked:
Mike Eghtebas
  • 2
1 Solution
 
rbudjCommented:
CSS Layout:
<!doctype html>
<head>
<title>CSS Layout</title>
<style type="text/css">
body {
	text-align:center;
}
.clear {
	clear:both;
}
#form-wrapper {
	width:1048px;
	min-height:100px;
	
	overflow:hidden;
	
}
.leftForm, .rightForm {
	width:484px;
	min-height:100px;
	background-color:#cccccc;
	
}	
.gap {
	width:40px;
	min-height:100px;
	background-color:#999999;
	
	
}
.leftButton, .rightButton {
	width:404px;
	min-height: 100px;
	background-color:#cc22cc;
}
.middleButton {
	width:200px;
	min-height: 100px;
	background-color:#ff0000;
}
.right {
	float:right;
}
.left {
	float:left;
}

</style>
<head>
<body>
<div id="form-wrapper">
	<div class="gap right">4 - annual</div>
	<div class="rightForm right">rightForm</div>
	<div class="gap right">2 - gap</div>
	<div class="leftForm left">1 - leftForm</div>
	<div class="clear"></div>
	<div class="gap right">8 - empty</div>
	<div class="rightButton right">rightButtons</div>
	<div class="middleButton right">middleButton</div>
	<div class="leftButton left">leftButton</div>
</div><!--end of main-wrapper-->

</body>
</html>

Open in new window

0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
You are very good.

Jealous?

Of course I am. LOL

Mike
0
 
rbudjCommented:
Thank you. I'm glad I could help
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now