CODEWITHSUNDEEP
htmlcssmargin
Felix Dombek
Felix Dombek

Reputation: 14372

Having a wider HTML block which has equal margins on both sides inside a narrower block

I'm working with an HTML site which has a design that is fixed on a certain width, centered with auto as left and right margins. I'm working on an interactive script that sometimes creates a large table as output that will not fit into this width, it might be wider.

To illustrate:

​<html>
<body>
    <div style="margin: 10px auto; width: 300px; border: 1px blue solid;">
    &nbsp;
        <div style="margin: 10px auto; width: 400px; border: 1px red solid;">
        &nbsp;
        </div>
    </div>
</body>
</html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

(http://jsfiddle.net/ALPXn/)

My question is, how can I align the inner, red div in the center, no matter if it sticks out to both sides of the blue div, without giving it an explicit negative left margin, because I don't know the final width?

Upvotes: 0

Views: 228

Answers (2)

Scotty C.
Scotty C.

Reputation: 744

The problem here is that you'd have to make the child element ignore the parent's width and position for this to work. It is possible with some javascript manipulation though. By changing the css position to absolute, and centering it relative to the screen, it will effectively ignore the parent, while still technically being contained by it.

Updated link using offsetWidth: http://jsfiddle.net/g6dGE/1/

Upvotes: 1

Rohit O
Rohit O

Reputation: 340

I think you can do this using jquery. You can change the css dynamically, after page has been loaded you can change css. Code will look similar to this.

var x = $('outerDiv').width();
var y = $('innerDiv').width();
​$('innerDiv')​​​​.css('left',-(y-x)/2)​;​

For that, you have to give divison id's as outerDiv and innerDiv.

Upvotes: 3

Related Questions