Solved

How can I do this (CSS and HTML)

Posted on 2011-09-18
10
244 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
 

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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
updateParent() HTML Javascript 21 61
jQuery value within div undefined 3 22
Open a div with click on an image 7 49
Gradient CSS 4 15
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now