• Locked
2 replies [Last post]
Wed, 2013-03-13 21:32
md7dani
md7dani's picture
Offline
newbie
Last seen: 6 years 45 weeks ago
Timezone: GMT+2
Joined: 2013-03-13
Posts: 3
Points: 5

Hi all, my first post here.

I tried to centering a div with

margin-left:auto;
margin-right:auto;

then the div moves to the left side. Not sure why it doesn't move in the centre of the web browser. I also want it to be responsive and adapt to the size of the window. How can I do that?

Top
Tags:
Wed, 2013-03-13 21:49
#1
ttkim
ttkim's picture
Offline
newbie
Last seen: 10 years 8 weeks ago
Timezone: GMT-7
Joined: 2013-03-07
Posts: 10
Points: 13

Div Block?

There might be a few reasons why it's not working.

1. The div should be a block. Hopefully, you didn't change the display to inline or something.

2. If the div is a block, the width should automatically be auto. You can assign it a specific width (like 1000px), but if you want a fluid width, give it a percentage width. For example...

#yourDiv {
    width: 90%;
}

Top
Thu, 2013-03-14 22:01
#2
md7dani
md7dani's picture
Offline
newbie
Last seen: 6 years 45 weeks ago
Timezone: GMT+2
Joined: 2013-03-13
Posts: 3
Points: 5

It was set to px but changed

It was set to px but changed it to %, now it's better.

The other problem still present, not sure what you mean, it's in a block. When I put the div outside the body it works, inside not working. Seems like body or wrapper tags are doing something strange.
The code looks like this:

* { 
   margin: 0; 
} 
html, body { 
   height: 100%; 
} 
.wrapper { 
   min-height: 100%; 
   height: auto !important; 
   height: 100%; 
   margin: 0 auto -42px; /* the bottom margin is the negative value of the footer's height */ 
} 
 
<body style="background:black; margin-left: auto; margin-right: auto;"> 
 
      <div class="wrapper" style="margin-left: auto; margin-right: auto;"> 
         main content here
      </div> 
</body>

Top
  • Locked