2

I have to use a float div (the main window of my application), and I'd like to center that floated DIV based on the client's screen width. How can I accomplish that?

Right now I'm using a left:20% but that's not always centered depending on the user's screen resolution

Albert
  • 3,639
  • 13
  • 43
  • 58
  • That needs more explanation. Either it's floated or its centered (ie part of the layout). Centering is trivial with margin: 0 auto. Why does it need to be a float? – cletus Oct 22 '09 at 17:38
  • 1
    If I don't float a container i'm working with, it won't auto-expand and grow with its content...but at the same time, i want that container to be centered on the monitor – Albert Oct 22 '09 at 18:04

4 Answers4

3

Do you want the div to grow relative to the browser window, or to fit the content inside of it?

If the former, you can just use a percentage based width rather than pixel, and it should still center.

If the latter, don't use a float...start by setting width:auto; (I think that should make it auto-expand to fit content). Then you will need some javascript to measure the width of the DIV, set the width: css property in pixels, then measure the browser window, and center the container based on these measurements.

Sorry, I was wrong about width:auto;. I guess just float it, and then use javascript like I described above to manually set the margin-right and margin-left.

Sorry, thought up a better solution.

#float { 
    float:left;
    margin-left:50%;
    position:relative;
}

And then, using jquery,

$(document).ready(function() {
    var float_width = $('#float').width();
    var left_spacing = float_width / 2;

    $('#float').css('left', '-' + left_spacing);
});

Forgive me if my javascript is off or doesn't quite work...I didn't test it and I'm a JS noob :)

Kevin C.
  • 2,499
  • 1
  • 27
  • 41
0

You can try to use

.mainWindow {
    margin: 0 auto;
}

then make sure the parent element is text-align: center;

jkelley
  • 2,570
  • 3
  • 21
  • 24
  • `text-align: center` will not work in modern browsers to center elements. only text. – Jason Oct 22 '09 at 20:16
  • 3
    @Jason That's not entirely true; if you set the `display` of the element to `inline-block` or `inline` it will behave as the text does. – Nathan Kleyn Oct 22 '09 at 22:24
0

I usually use an auto centered container div and then put any other containers (like your floated div) inside that container. Is there any particular reason you can't do that?

Example CSS:

#container {
width: 960px;
margin: 0 auto;
position: relative;
}
Shea Daniels
  • 3,232
  • 3
  • 23
  • 27
  • Yes I can't use static widths on any container...that's why I use a float:left element, so the DIVs can grow automatically. So if I used an outer centered container it would have to grow along with the inner divs – Albert Oct 22 '09 at 17:53
  • Interesting requirement, I've never heard of anything quite like that before. – Shea Daniels Oct 22 '09 at 21:38
0

My solution is easy with css

.div{
    position: absolute;
    top: calc(50vw);
    left: calc(50vw);
}

is code clean

Nelson Javier Avila
  • 368
  • 3
  • 8