6 Replies - 1070 Views - Last Post: 25 July 2010 - 11:05 AM

#1 inkexit  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 61
  • Joined: 05-July 10

Standard Float Center

Posted 20 July 2010 - 03:18 PM

Just trying to figure out the basic "float center" content div thats used in wordpress and lately almost every web page. you know, a background filling the browser window with a color or repeating image, and in the exect center of the broweser window, a div that stays at a fixed width while the margins adjust automatically around it. Sometimes the center div has an image border around it.

heres an example of the style. Its on a page that actually attempts to explain how to do this, but I can't figure it out:
http://webmonkeyswit...9/float-center/

here's the css code I have so far:

<style type="text/css">
<!--
body { background-color:#D00 }

.content {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffd3d3;
	width: 730px;
	float: left;
	position: relative;
	left: 15%;
	background-image:url(104.jpg);
	background-repeat:no-repeat;
}
-->
</style>



Is This A Good Question/Topic? 0
  • +

Replies To: Standard Float Center

#2 husseycoding  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 52
  • View blog
  • Posts: 174
  • Joined: 23-June 10

Re: Standard Float Center

Posted 20 July 2010 - 04:06 PM

What that page outlines is one way of getting content to be central on a page, to be honest I don't consider a purely css solution like that to be the best because the content will move off the left hand side of the window if it's made small enough, I much prefer using Javascript myself because that ensures the left hand side does not leave the browser window whatever size the window is.

So basically the method described there works as follows:

Create a container div the width you wish the centered contents to be, set its position to left:50%. This means that the container divs left hand edge will lie exactly halfway across the browser window whatever size this window is.

Now within this container div, the way I would do it is to create an inner container div within which all your content will reside. Doing it this way means you only have to position 1 div to center the content. The width of this inner container should be 100% (which will make it the same width as the original container you created because the percentage is relative to its parent), and the position of this inner container div should be set at left:-50%.

The left:-50% is again relative to the parent, in this case the width. So say the width of the original container div is 800px, then 50% of that width is 400px. Therefore, saying left:-50% would in this case be the same as saying left:-400px. This places the center of the inner container div exactly at the left hand edge of the original container div. If you remember this left hand edge was itself at the center of the page, so you now have a centered div.

Remember of course you will need to set the position of the div before it will respond to a left css command.

Like I said, if you make the page less than, in this case 800px being the width of the container div, then the left hand side of the div will go off screen to the left. Not good, so thats why I tend to use Javascript:

function setdivposition()
{
    fromleft=(window.innerWidth-mydivwidth)/2;
    if (!fromleft)
    {	
        fromleft=(document.body.clientWidth-mydivwidth)/2;
    }		
    if (fromleft<0)
    {			
        fromleft=0;	
    }			
    document.getElementById('mydiv').style.left=fromleft+"px";
}


This function is cross browser compatible, will center a div horizontally and will not let it move off the edge off the screen on the left hand side. Just replace mydivwidth with the width of the div to be centered, and mydiv with the id of the div to be centered.

Add a call to the function in the body tag for when the page loads:

onload="setdivposition()"


And add a call to the function within your javascript for when the page resizes:

window.onresize = setdivposition;

Was This Post Helpful? 0
  • +
  • -

#3 inkexit  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 61
  • Joined: 05-July 10

Re: Standard Float Center

Posted 20 July 2010 - 04:30 PM

Wow! Thanks for the thourough response!

Would it work to pass the name of the div to the javascript so you could do multiple divs per page like this?:

function setdivposition(var funcDivName)
{
    fromleft=(window.innerWidth-mydivwidth)/2;
    if (!fromleft)
    {	
        fromleft=(document.body.clientWidth-mydivwidth)/2;
    }		
    if (fromleft<0)
    {			
        fromleft=0;	
    }			
    document.getElementById('funcDivName').style.left=fromleft+"px";
}



Also, would this method work with css wrappers so I can create an outline with curved corners like the thick gray line around the page I linked to?

This post has been edited by inkexit: 20 July 2010 - 04:30 PM

Was This Post Helpful? 0
  • +
  • -

#4 husseycoding  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 52
  • View blog
  • Posts: 174
  • Joined: 23-June 10

Re: Standard Float Center

Posted 21 July 2010 - 12:24 AM

Hi inkexit,

Yes you certainly could pass a variable to the function and use this to identify the div to be centered. If you are wanting your entire site contents to be centered then better to put this all inside a container div and then have the javascript target this container div.

If you are planning to use something like curvy corners then yes it will work. As long as everything you need centering is contained within the div you are targeting then it will work as expected.
Was This Post Helpful? 0
  • +
  • -

#5 inkexit  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 61
  • Joined: 05-July 10

Re: Standard Float Center

Posted 21 July 2010 - 02:22 PM

I'm fairly new to CSS, do wrappers load automatically with their parent div? Or would I create the thick outline with a 3 x 3 table inside the div, with cell 2-2 being the content section?
Was This Post Helpful? 0
  • +
  • -

#6 husseycoding  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 52
  • View blog
  • Posts: 174
  • Joined: 23-June 10

Re: Standard Float Center

Posted 22 July 2010 - 02:51 AM

Hi inkexit,

By wrapper I just mean a containing div so a basic code breakdown would look something like this:

<div id="wrapper">
    <div id="content1">Some content 1</div>
    <div id="content2">Some content 2</div>
    <div id="content3">Some content 3</div>
    <div id="content4">Some content 4</div>
</div


In this case, you can just target the div 'wrapper' and all the content divs inside it will be moved as well because the position of the content is set relative to the position of the wrapper div. Just makes its a bit easier than having to target all the content divs individually.
Was This Post Helpful? 1
  • +
  • -

#7 inkexit  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 61
  • Joined: 05-July 10

Re: Standard Float Center

Posted 25 July 2010 - 11:05 AM

Still messing around with this. Might have some more questions later. I must not have something implemented right yet as when I load a page designed with this method, the left edge of the content is centered, not the center of the content, if you follow.

Also wanted to say I really like your co's logo!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1