CODEWITHSUNDEEP
htmlcsslayoutxhtml
AndreaNobili
AndreaNobili

Reputation: 43077

How can I correctly center this div into its container? What is wrong?

I am not so into HTML and CSS and I have some problems trying to center a div into it's container that I have into a very old legaxy JSP page.

So the situation is the following, I have something like this:

<div class="panel-wrapper">
    <div class="panel-content" style="width: 900px">
        <div id="table1Container">
            // THIS CONTAINS ORRIBLE SHOWED TABLE STRUCTURE
        </div>
    </div>
</div>

I want to center the div having class="panel-content" into it's container (the div having class="panel-wrapper").

These are the CSS settings related to these 2 divs:

.panel-wrapper {
    float: left;
    overflow: hidden;
    width: 100%;
}

.panel-content {
    background: none repeat scroll 0 0 white;
    float: left;
    margin-left: 5%;
    margin-right: 5%;
    overflow: hidden;
    position: relative;
    width: 90%;
}

table.standard-table-cls {
    border: 1px solid #76818a;
    border-collapse: collapse;
    color: #76818a;
    font: 11px Verdana,Geneva,Arial,Helvetica,sans-serif;
    margin: 0 !important;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

and this is what I see:

1) Here I select in FireBug the external div having class="panel-wrapper" to show that it is horizontally extended to the 100% of the page:

enter image description here

2) And here I show the same page highlighting by FireBug the internal div having class="panel-content" and on with I have set a fixed width to 900px by the inline CSS

enter image description here

So, as you can see from the code and from the previous screenshot, the external (class="panel-wrapper") seems that it is extended to 100% of the page width and the more internal class="panel-content" (the one that I want to center) has a fixed width of 900px and some margin given from its CSS (margin-left: 5%; margin-right: 5%).

Ok, so I have tried to center it changing the inline CSS in this way:

<div class="panel-content" style="width: 900px; margin-left: 0 !important; margin-right: 0 !important;">

But it is not centered, it is moved on the left (simply there is no more margin or something like that).

This is what I see:

enter image description here

So what am I missing? How can I correctly center the div having class="panel-content" into the div having class="panel-wrapper"?

Tnx

Upvotes: 0

Views: 106

Answers (2)

Simon Mathew
Simon Mathew

Reputation: 33

Change your panel-content class css to

.panel-content {
    background: none repeat scroll 0 0 white;
    margin: 0 auto;
    width: 90%;
}

Upvotes: 2

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You must get rid of the floats and set text align center to his parent, try this:

CSS

panel-wrapper {
    overflow: hidden;
    width: 100%;
    display: block;
    text-align: center;
}

.panel-content {
    background: none repeat scroll 0 0 white;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    display: inline-block;
}

table.standard-table-cls {
    border: 1px solid #76818a;
    border-collapse: collapse;
    color: #76818a;
    font: 11px Verdana,Geneva,Arial,Helvetica,sans-serif;
    margin: 0 !important;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

DEMO HERE

Upvotes: 1

Related Questions