Viewing 16 posts - 1 through 16 (of 16 total)
  • Any CSS / HTML Wizards in the House?
  • oliwb
    Free Member

    Okay so, I have a website (not going to give the URL in case people think it’s a plug). But, I’ve never used DIV containers before and on the whole what I’ve done is working except for one page where it’s all to pot!

    Basically I’m trying to get 3 containers to all align in a row centred in the middle of the page. Like this:

    Or if viewed in low resolution stacked appropriately:

    At the moment what I get is three lined up but aligned to the left of the page, like this:

    The CSS looks like this:

    .ContactCntr {
    align-self:center;
    width:100%;
    max-width:1170px;
    margin:0 auto;
    background-color:#e9e9e9;
    display: inline-block;
    }

    This contains all of the 3 blocks.

    .form {
    width:33%;
    margin:auto;
    max-width:400px;
    padding-top: 50px;
    display: inline-block;
    }

    .contact {
    width:33%;
    padding-left:15px;
    padding-right:15px;
    padding-top: 50px;
    vertical-align:top;
    text-align:justify;
    display: inline-block;
    margin: auto;
    max-width: 450px;
    }

    This is the “text” in my example pictures.

    .map {
    width:33%;
    vertical-align:top;
    display: inline-block;
    margin: auto;
    padding-top:50px;
    }

    This is the iframe (Google maps).

    I’ve been scratching my head how to solve this for a while now. Nothing I do seems to result in what I’m after. I bet it’s something really simple – but as I said before this is the first time I’ve messed with DIV containers….

    Thanks,
    Oli.

    whitestone
    Free Member

    You want another div to wrap the three content ones then apply the “center” to that.

    That is assuming I’ve understood your diagrams correctly and each “box” is a div in your html. Here’s a link https://css-tricks.com/centering-css-complete-guide/

    acidtest
    Free Member

    Try changing all occurrences of

    display: inline-block;

    to

    display: block;

    Fresh Goods Friday 696: The Middling Edition

    Fresh Goods Friday 696: The Middlin...
    Latest Singletrack Videos
    oliwb
    Free Member

    Okay – so I tried changing all the in-line block occurences to just block, but I’ve ended up with a page that looks like this:

    It doesn’t seem to matter how wide the page is, all of the blocks are stacked vertically instead of horizontally?

    I looked at that other link but I’m a bit confused about the flex DIV. Do I leave me CSS along in the other containers and just wrap them inside a flex one?

    Thanks guys.

    doris5000
    Full Member

    good work on ‘not giving the URL away’ btw. have you considered a job at MI5? 😉

    pdw
    Free Member

    Here it is using inline-blocks:

    https://jsfiddle.net/p7Lrvg01/

    The nasty bit is that you need to have no space between the inner divs in the HTML, otherwise you get spaces between your blocks.

    And here it is using blocks. You need to use “float” to get blocks to line up alongside each other.

    https://jsfiddle.net/8Luvgr2w/

    oliwb
    Free Member

    Haha – I’d do a better job than you….Locost builders isn’t my website – I’m just using it to host the pictures as chrome remembers my password for it but not photobucket right now 😉

    whitestone
    Free Member

    Think of block elements as all being on their own line:

    These
    are
    block
    elements

    Flexbox is a whole different ball game and you might not want to go there!

    If you wrap the three boxes you want to be centred in another div then that div will be just the right size to contain the three boxes (plus any margins they might have). By default this wrapper will be left aligned so to centre it do:

    margin: 0 auto;

    Basically you can apply the centring to a single element not a group of them

    BobaFatt
    Free Member
    oliwb
    Free Member

    Okay getting close…I tried the “flex” trick on the container that wraps the other 3 containers and it’s now adjusting and displaying correctly – until you open it on a phone / make the window narrow, at which point the 3 containers all end up on top of each other instead of stacked.

    So close….

    oliwb
    Free Member

    Oh – had never heard of Bootstrap. I’ll take a look – although the rest of the site is fine.

    whitestone
    Free Member

    Ah. Have you set the container to be display: flex; ? If so then the items inside need their flex-wrap property set http://www.w3schools.com/cssref/css3_pr_flex-wrap.asp

    prezet
    Free Member

    http://codepen.io/anon/pen/WRpKOg

    Flexbox is your friend. But will need fallbacks for older browsers.

    doris5000
    Full Member

    Would anyone use media queries to do this?

    pdw
    Free Member

    If you want it to go straight from three horizontal to three vertical, rather than via 2+1 at intermediate resolutions then I think you need either media queries or flexbox.

    butcher
    Full Member

    I wouldn’t use flexbox as a complete novice. It’s quite confusing… Inline-block and float is the traditional way, they both do pretty much the same thing with some minor variations in behaviour.

    To center, you can apply text-align:center to the parent element. Or place the 3 blocks in a div with margin:auto 0; which basically gives it equal margins at each side and pushes the div to the center.

    And this…

    If you want it to go straight from three horizontal to three vertical, rather than via 2+1 at intermediate resolutions then I think you need either media queries or flexbox.

    Media queries are your friend for responsive code. So say when you go from one screen size to another, you can switch from inline-block, to block, for example.

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Any CSS / HTML Wizards in the House?’ is closed to new replies.