Centering Div Within a Div Trouble

ifdc1974 · Member · Dec 5, 2014 at 3:55 pm
Copy link

Add topic to favorites
Hi,

I want to center a div within a div and make sure that it is responsive.

Here is what it looks like right now.

http://ifdcorg.wordpress.com/burundi/

Scroll to the bottom of the page where it has the black box that says CATALIST-2. I want that box to be centered in the middle of the page.

The current CSS for that is
```
col-md-7 {
	width: 33.333%;
	height: 500px;

}

It is wrapped in a div called containerforproject

Here is the CSS for that:
```
}width: 900px;
margin-left: auto;
margin-right: auto;
padding: 0;
}`

Of course I have changed this div to make it responsive.

Help appreciated.

Thanks.

Heather

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 5, 2014 at 8:44 pm
Copy link
Hi, change your .col-md-7 rule into this to center that Catalist-2 div.
```
.col-md-7 {
    float: none;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    width: 33.333%;
}
```
kerin2014 · Member · Dec 8, 2014 at 1:45 am
Copy link
which reminds me

i need to find out if the (latest) CSS3 flex box standard is supported by the WP CSS editor

the flexbox model as I understand it makes responsive layout issues melt away like gelato in the sahara — or so i hear.
ifdc1974 · Member · Dec 8, 2014 at 1:52 pm
Copy link
Thanks sacredpath. Thanks kerin! If this is true, let me know :)
thesacredpath · Member · Dec 9, 2014 at 1:08 am
Copy link
@ifdc1974, you are welcome.

@kerin2014, have you tried using flexbox here? I know there are some elements of the new CSS related to flex that are not yet allowed, but this is being looked at.

One of the main issues is support for older browsers. It takes a lot of extra CSS in order to do that, and not including that extra CSS can mean those with older browsers (and we aren’t talking really old) may see a site that is extremely wonky.

No items found.