Avatar of 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


Avatar of undefined
Last Comment

8/22/2022 - Mon

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 style="float:left;margin: 0 auto;display: block;color:White; text-align:right;width:57%;">
             ///////////////////////////////////add your div content here
                <div style="margin: 0 auto;display: block;float:right;color:White; padding-right:2px;width:15%; text-align:right;">
                  ///////////////////////////////////add your div content here

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

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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	#wrapper{width:100%;margin:0 auto;}
	#middle{float:left;width:50%;background:#ccc; }


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


Open in new window

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

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.

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

Cheers for the links,

This is the layout....

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?

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.