Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

css div layout question

Posted on 2014-09-16
12
144 Views
Last Modified: 2014-09-17
I need to layout the attached screen shot using html and css.  How do I get the 4 main rectangles (My improvement strategy, review, plan summary, and budget analysis) to line up correctly?  The rectangle on the far right overlaps both rows.
Capture.PNG
0
Comment
Question by:jackjohnson44
  • 5
  • 4
  • 2
  • +1
12 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40325776
I can't tell anything just from a screen shot.  we need to see how the markup has defined the structure befor we can determine what is need for the CSS to produce the desired results.  If you post a link to the page we should be able to help.

Cd&
0
 
LVL 9

Expert Comment

by:Trenton Knew
ID: 40325791
So, I'm assuming you want the "Plan Summary" div to be the same height as the other other div elements, creating a full even rectangle?  Or are you instead wanting a consistent height among the top three with the bottom div spanning the entire width evenly?
0
 

Author Comment

by:jackjohnson44
ID: 40325807
COBOL
There is no html since I am working from a wireframe, which means this question should be easy and flexible.  I am just trying to lay out 4 divs the way they are shown on the attachment.  I am not concerned in the contents of each div.

Here is the basic html that I was going to use.

<div>My improvement strategy</div>
<div>review</div>
<div>plan summary</div>
<div>budget analysis</div>

Trenton, the budget analysis only spans the improvement strategy and review sections, it does not span the plan summary.  This is a wire frame that I need to reproduce as closely as possible.
0
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 
LVL 9

Expert Comment

by:Trenton Knew
ID: 40325932
Jack, honestly... even though it's rare that people use these anymore with the later standards and how flexible divs are, I would seriously consider just using a table to accomplish this result.

<table>
 <tr>
  <td>ImprovementStrategy</td>
  <td>Review</td>
  <td ROWSPAN=2>PlanSummary</td>
 </tr><tr>
  <td COLSPAN=2>Budget Analysis</td>
 </tr>
</table>

Open in new window


Optionally, you can place divs inside the td tags if you want to flex the styling on the cell data.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40325981
Use two wrappers the first one carries the three left boxes. and id floated left, as are the three content boxes.  for the second wrapper; also floaed left you put the plan summary in that one.

The it just becomes a matter of setting appropriate widths, padding and margins to possition correctly.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40325990
Trenton, the 20th century just called and they would like their layout back.  I can't believe anyone would advocate using a table layout for something as simple as this.

Cd&
0
 
LVL 9

Expert Comment

by:Trenton Knew
ID: 40326361
You don't have to be rude, broham.  I'm looking at your layout from the reference image and it LOOKS like a table.  Add to that the fact that you seem to verbally express that you aren't the most experienced in HTML/CSS design.  I was simply trying to provide you with the most simple path towards accomplising the desired layout.  "As simple as this" can be approached using a simple I acknowledged when I replied that It wasn't the most modern approach, but you decide instead to attack me for recommending it.  That's cool, maybe someone else will help you, but my position on it now: figure it out yourself.

Contain your div's within divs and float them appropriately if you really want to do it the hard way.
0
 

Author Comment

by:jackjohnson44
ID: 40326432
Trenton, I think you confused the asker of the question with another commenter.
0
 
LVL 9

Expert Comment

by:Trenton Knew
ID: 40326487
you're right, my apologies...  ironic that his/her name includes the term "dinosaur" but criticizes me for suggesting an older method.
0
 
LVL 9

Accepted Solution

by:
Trenton Knew earned 500 total points
ID: 40326500
<div style="float:left;">
  <!-- Nest divs here -->
    <div style="float:left;">My improvement strategy</div>
    <div style="float:right;">review</div>
    <div style="clear:both;">budget analysis</div>
</div><div style="float:right;">plan summary</div>

Open in new window


if you want to set width and height attribs, you may also require a position:relative; for them to work
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40328626
Hmmm....

div method == 5 lines of code with content and presentation separated.
table method == 9 lines of code with presentation part of the content which makes maintenance more difficult.

So which is easier?

Trenton,
If you do not want to be criticized then don't post novice answers when it appears that you are quite capable of presenting code based on best practice.  The subscribers to the site are looking for modern professional solutions; not ancient fixes that result in maintenance issues down the road.

Oh and yes I am a dinosaur, who remembers why we don't do that stuff any more.

Cd&
0
 

Expert Comment

by:mombunheng
ID: 40329600
Hi,

There may be something like this.

Thanks'
Bunheng
checkit.zip
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Hide cell in a table 2 27
Extracting content from meta tag PHP MYHTML DOM 3 21
Phone Does Not Abide By CSS Breakpoint For Navigation Controls 6 22
Why "Mobile First"? 5 19
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question