Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How can I do this (CSS and HTML)

Posted on 2011-09-18
10
Medium Priority
?
254 Views
Last Modified: 2012-08-14
Hello, I want to make a page where I have a fixed container size in teh middle and a container on the left and right side, where i want a different image on each, but I want the left and right containers to stretch, when the site is resized.
Untitledsketchprimitive.png
0
Comment
Question by:JoachimPetersen
10 Comments
 
LVL 13

Expert Comment

by:Hugh McCurdy
ID: 36556299
It's difficult to help without some context.  Is this a project for yourself, work, school or something else?  If it's work, are you working for the U.S. government?  (Accessibility concerns).  What is the target audience?  What is your background?  (I need starting point.  Pointless to tell an 8th grader that 5+7=12).

Do you know about tables <TABLE> vs divisions <DIV>?  Do you care?  (What is the context?)
0
 

Author Comment

by:JoachimPetersen
ID: 36556428
Okay I want it in DIV's, if possible as that is my problem(hate tabels).

The backgrounds is two imaged splitted, of a forrest. so in center of the two images is a DIV where I ofcause want all the content. here is a preview how I want it made in tabels, how will you do this in DIV's

.
divtotable.png
0
 
LVL 13

Expert Comment

by:Hugh McCurdy
ID: 36557081
I'm not entirely sure but it occurs to me that the page we are now viewing is a lot like what you want.  The content is centered and maintained a fixed width while the divisions to the side expand and contract with resizing.  Of course, you are trying to display a picture and Experts Exchange has a pattern as a background image.
0
Industry Leaders: 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:JoachimPetersen
ID: 36557174
The posted image is of what I exactly want, as I did it myself in tabels, the problem is I can't figure out/get it to work with DIV's and that is why I write here for help. if you know what positions to use then I would love to hear it as that is my problem.

The two images is the same image but the other is just flipped horizontally.

so fixed content size(800px) and two DIV's surrounding it, that stretches their size to fit the screen around it. like in the preview above, just done in DIV's.

Thank you.
0
 
LVL 13

Expert Comment

by:Hugh McCurdy
ID: 36557221
I don't know how close you have it to working or what's missing.

Without this, I'll say the left one should float left and the other float right.  Have you used float?

Are you able to follow the source code if you ask to see the source code for this EE page?

Caveat, I haven't done this (3 horizontal divisions on a page) myself.

Maybe if you show part of the CSS code you are using that is relevant to the divisions?
0
 

Author Comment

by:JoachimPetersen
ID: 36557352
I have tried with float, but what will you set the width to in the two DIV containers?
0
 
LVL 13

Expert Comment

by:Hugh McCurdy
ID: 36557413
I would say to use width but you want the width to resize.  You might try the width directive anyway to see.

In the relevant CSS section (for that division),
width : 200px

Doubt that will be what you want but might as well see what it does.
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 36557731
This article on Fluid Grids should assist:
http://www.alistapart.com/articles/fluidgrids

This is an addition to the above to account for Fluid Images:
http://unstoppablerobotninja.com/entry/fluid-images/
0
 
LVL 16

Accepted Solution

by:
glenn_1984 earned 1000 total points
ID: 36557739
1. Create a centered div, like:
#centered {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        width: 900px;  (this could be % of the entire screen, which would vary the size based on browser and screen resolution.  I may use 100% or 80%)
        z-index: 0;
}

INSIDE the above div put the following (name them to suit)

<div id="centered">
    <div id="left"> </div>
    <div id="middle"> </div>
    <div id="right"> </div>  
</div> <!-- centered -->

Left and right would be each be 1/2 of the difference between centered and middle if you used a px width for centered.

For example if centered width was 1200px and middle width was 800px, left and right would be 200px wide each.  

for left div Left margin would be 0px
for right div Right margin wold be 0px
*****
However if centered div is a percent like 100%, it wouild be impossible to use px and % for the internal divs.  If someone has a screen resolution of 1024 x 768 and the middle is 800px wide, you have 224px allowed for left and right or about 10% each.

However, if my screen resolution is 1600 x 900, then you have 800px to share between left and right or about 25% each.

To solve this problem when using a percentage width for the whole web page, everything needs to be in %.

Your 800px middle would need to be defined at 50% if you wanted the sides to each be 1/2 as wide as the middle.

If you wanted the sides to be 20% as wide as the middle, that would change the middle div to 60%.

Your middle graphic length should scale automatically as the width changes.

Start with a vector graphic to avoid loss of clarity OR a large jpg (1600px wide or more).
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36557758
Here's a different approach:

the css
 
the html
 
a working example:
http://www.candpgeneration.com/EE-forest.php
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

782 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