Margin Auto in Div

HTML & CSS
1

Hi, Im trying to center my content in my div using margin:auto with a set width to get it out of touching the border. SITE
It is the content on the left side with the iframe and text on the bottom. im trying to put margin auto and margin top. and left as well. The iframe is just for temporary fill…

    <div id="contactwrapper">
      <div id="sectionwrap1">
 <iframe src="/FORMA.aspx" frameborder="0" width="450" height="450" scrolling="no" id="contact"></iframe>         
          <h3 class="contactitles">MANUFACTURING</h3>
          <p class="addresses">9735 Lurline Ave.
                               Chatsworth, CA 91311 USA</p>
         <img src="http://iogproducts.com/images/number1.png" class="icon" alt="Smiley face" height="25" width="125">&nbsp;
         <img src="http://iogproducts.com/images/number2.png" class="icon" alt="Smiley face" height="25" width="125">&nbsp;
      </div>

#contact{
 margin: 20px auto 0;
max-width: 330px;
}

1099×614 73.5 KB

2

Your iframe on the fiddle doesn’t seem to have id=“contact” nor the CSS in there.

I’m having a little trouble picturing what you want exactly.

3

Really? it is in there SITE

4

I want it to be something like this…like I did before but the same method I did for this page …like the way my content is centered in their respective divs…

1124×560 107 KB

5

You are linking to a codepen. Not your website.

I’m extremely confused.

6

Sorry @csosa , but as Ryan said, it’s quite hard to work out what you are asking here. Which elements are you trying to center?

7

The one last thing I will say is that if you are trying to center content inside of a div, generally you can just apply text-align:center; to the div and it’ll center its’ contents…

8

@RyanReese @ralphm Sorry guys ill explain it better…

9

So basically I have my elements like stuck together when I use the display table method and it is also hitting the border of my wrapper and I want to center them away from each other and the border. Not sure why it is doing that.

1240×608 71 KB

by the way I am using codepen

10

I was able to use margin but margin auto did not seem to work on it, I know I need a set width but when I put the width it did not wok either…I have it like this:

#content1{
   margin:20px;
 }

#content2{
   margin:20px;
 }
11 
#test{
   margin:auto;
  max-width:35;
}

35 elephants? 35 gas cans? 35 tomatoes?

12

Ive updated it since then. codepen

13

Here are a few displays for you to try out.

  1. On #content1, give it text-align:center
    OR
  2. Give #content1 a max-width and margin:20px auto;

Do either of those give displays of what you want? I’m not entirely sure what look you are going for.

14

This look. it worked. I was using percentages but that is only for the element’s parent, or in other words, the width of the containing block right?

15

I’m afraid I don’t understand this sentence. Sorry.

If you are questioning why something did not work, can you work up a quick demo showcasing it and I can walk you through why something didn’t work?

Percentage widths are going to be based off the parents width, correct.

16

ok. Yea I was using higher percentages in the child elements and that the reason it was not working…for example 100% width.

17

Yes if the width is 100% then its effectively the width of hte parent, and it obviously will be unable to center itself within the child since it has no margin to work with :slight_smile: .

1 Like
18

Sorry, I mean it will be unable to center itself within the PARENT*

1 Like
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.