Solved

Do I have too many DIVS and how do I make some expand based on content?

Posted on 2011-03-24
16
228 Views
Last Modified: 2012-05-11
Attached is a layout for a site I am working on.  You will notice many DIVS within DIVS. As far as the CSS goes, I can pretty much make it work, except for 2 DIVS that I want to expand based on the content of a third DIV.  Here is some more info:

Every DIV has a fixed height and width except "Left Middle", Main Middle", and "Right Middle". This is shown with the arrows. "Left Middle" and "Right Middle" have a small graphic that I want to repeat Y.
"Main Middle" will always be long enough to at least reach below the tops of "Left Middle" and "right Middle", so we don't have to worry about figuring out how to get "Main Middle" to expand due to lack of content.
Notice that all three of the DIVS that expand are contained within separate DIVS
I just noticed that the "Left", "Right", and "Main" DIVS are not contained within one DIV, which if I need I will call "Content".
Am I using too many Divs? I know I can use the "Overflow: hidden" style but I am not sure which DIVS to put that on.

Thanks in advance. LAYOUT.pdf
0
Comment
Question by:princeservice
[X]
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
  • 9
  • 7
16 Comments
 
LVL 16

Accepted Solution

by:
s8web earned 500 total points
ID: 35209201
What is the purpose of the divs:

left
lefttop
leftmiddle
middletop
rightmiddle
righttop

Are spacers 1-4 divs?

Are buttons 1-4 divs?

Do you have a mock-up of what you want it too look like in the end?
0
 

Author Comment

by:princeservice
ID: 35209767
www.speedysigns4u.com

Yes they are all divs.

0
 
LVL 16

Expert Comment

by:s8web
ID: 35215162
Yes, that's a bit many containers for what you're trying to pull off. The mantra of developers is KISS. Keep it simple stupid, or keep it stupid simple if you want the nice version (not to imply anyone's stupid or anything :)) Give me a bit, I'll work out an example for you.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:princeservice
ID: 35215399
Cool. I figured I could use just one container for the buttons instead of all the divs for the spacers and buttons.
0
 
LVL 16

Expert Comment

by:s8web
ID: 35223839
I would do something like this.
princeservice.zip
0
 
LVL 16

Expert Comment

by:s8web
ID: 35223860
Don't forget to delete the source file (.psd) if you publish the assets/img folder. It adds 963kb.
0
 
LVL 16

Expert Comment

by:s8web
ID: 35223897
If there isn't enough content in lboxmid, to expand the box, you can add min-height to #maincontent. If you care about ie6 (I don't) you can do:

#maincontent{min-height:somethingpx}
*html #maincontent {height:somethingpx}

ie6 doesn't get min-height. It's not going to get the transparency stuff either, but it will be usable in ie6.

Tested in FF3,4 IE7,8, Chrome. FF4 seems to have a bug with fixed backgrounds at the moment.
0
 

Author Comment

by:princeservice
ID: 35226317
Hey s8web,

I am just now seeing that you posted. I won't have a chance until Monday morning to review. Just giving you a heads up. I am not ignoring you.

THanks
0
 

Author Comment

by:princeservice
ID: 35234461
I do have a question. How did you slice using guides?
0
 
LVL 16

Expert Comment

by:s8web
ID: 35234502
I'm not sure I understand. I just use the guides as a visual reference.
0
 

Author Comment

by:princeservice
ID: 35234517
I just noticed that your photoshop file had guides but no slices on it. just curious. Everything else is working great. I have learned a lot so far.
0
 
LVL 16

Expert Comment

by:s8web
ID: 35234530
I do all the slicing manually.
0
 

Author Comment

by:princeservice
ID: 35235512
Cool. One more question if you dont mind. The reason I did some of those crazy slices is I couldn't figure out how to save an image where the shadow blends to transparency. Do you have a quick answer for that problem? Please see screencast.

 princeservice-437763.flv
0
 
LVL 16

Expert Comment

by:s8web
ID: 35235630
You have to use an image file type that supports transparency. PNG24 is what is most often used. There is also PNG8 which is lossy, and gif which is even lossier. If you use the export for web option in photoshop, you can get a pretty decent preview. Depending on the size and complexity of the image, PNG24 is usually manageable, especially if you use it in a situation where it's only a pixel high or wide and repeats.

CSS3 is cool because all of the things you want to do are supported natively without the use of background images (curved edges, shadows, gradients). It unfortunately will be a while before you can use CSS3 exclusively. Microsoft didn't start supporting it until IE9 which probably won't do well because it doesn't support XP. That means something like 50% of the browsers out there are IE7 and 8. So we're stuck with images as backgrounds for a while.

IE6 doesn't support background images. There are some javascript workarounds for IE6 if you're inclined, but MS stopped supporting IE6, and there's no reason why folks should still be using it.
0
 

Author Comment

by:princeservice
ID: 35235665
Yes. The preview with PNG24 is exactly what I needed. You have been more help then you could imagine. Wish I could give you 1000 points.

Thanks
0
 
LVL 16

Expert Comment

by:s8web
ID: 35235818
My pleasure, take care.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

717 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