Solved

How can I do this (CSS and HTML)

Posted on 2011-09-18
10
246 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
Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 

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 250 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

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…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

809 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