Avatar of deanlee17
deanlee17
 asked on

Positioning divs

Hi Experts,

I am trying to create 3 divs. The middle div is a heading and needs to auto centre, the other 2 divs sit either side. The main div fades to black on the right, so the right div needs to have a black background and the left div needs a white background. The 2 outside divs obv need to be flexible to fill the full screen on left and right.

Is this possible? Ive been trying for ages now and trying to use Z-index to put the centred div on top of the other 2, but no luck

Thanks.
CSSHTML

Avatar of undefined
Last Comment
LZ1

8/22/2022 - Mon
jafrazee

Basically anything is possible.  I added some style syntax to the divs but you should create a css class.
When spanning a page I like to create a main div container with the attributes of how I need them to be positioned on the page.  Note that mine is 100% of the width of the page.  Also notice that all my divs are different widths that do not = 100.  I make my multi divs a little smaller to make sure that all browsers will display correctly.  Depending on what you are doing you may need to do the same.
<div style="width:100%;">
            <div style="margin: 0 auto;display: block; float:left;color:White; padding-left:2px; width:25%;">
              /////////////////////////add your div content here
            </div>
             <div style="float:left;margin: 0 auto;display: block;color:White; text-align:right;width:57%;">
             ///////////////////////////////////add your div content here
             </div>
                <div style="margin: 0 auto;display: block;float:right;color:White; padding-right:2px;width:15%; text-align:right;">
                  ///////////////////////////////////add your div content here
                </div>
            </div>
deanlee17

ASKER
Yes but will this always auto centre? bearing in mind the rest of the site needs to be aligned underneath.
LZ1

Something like this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>



<style>
	#wrapper{width:100%;margin:0 auto;}
	#left{float:left;width:25%;background:#eee;}
	#middle{float:left;width:50%;background:#ccc; }
	#right{float:right;width:25%;background:#000;color:#fff;}
</style>


</head>

<body>
	<div id="wrapper">
		<div id="left">
			content here
		</div>
		<div id="middle">
			content here
		</div>
		<div id="right">
			content here
		</div>
	</div>
	

</body>
</html>

Open in new window

Your help has saved me hundreds of hours of internet surfing.
fblack61
deanlee17

ASKER
Lz1, this is the kind of setup I was looking at, im guessing the middle div will always line up with the rest of the site? The middle div just needs to contain an image.of width 854.
ASKER CERTIFIED SOLUTION
LZ1

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
deanlee17

ASKER
Cheers for the links,

This is the layout....
http://www.deans-place.co.uk/activus/test.html


The sides will just need to stretch to fill the screen, so i was going to use auto values? or would the 25% that you have work?
LZ1

Well, if the image you have is 854px wide, the 25% "should" work, but I would definitely read up a little more. There may be another way for you though, without tables.  

Are you able to edit the image at all?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.