Using Align Content in web page

[michaelc16865656]

Boy, it feels like I am asking too many questions.  I sincerely apologize for that.  I am learning alot though.

My question is regarding alignment of a <div>.  I have tried to enter the properties correctly into CSS and then enter that into my source code.  However, with this text box, I cannot get it to align left in the preview.  On the workspace, in split view, it shows it aligned left.  Any help is GREATLY appreciated.  Here is what I have:

Source:

  <div class= "boxed">

      <h3>WELCOME!</h3>

      <h3>Trinity Aerial Services, LLC</h3>

           <p class="welcome"> WE WORK TO GAIN THE SATISFACTION OF OUR CLIENTS, BY ENSURING THAT EACH JOB IS DONE TO THE SATISFACTION OF               THE CLIENT.<br /> LET TRINITY AERIAL SERVICES MEET <strong>YOUR</strong> EXPECTATIONS.</p>

           <p><span>Email :</span>mike@trinityaerialservices.com</p>

           <p><span>Website :</span> www.trinityaerialservices.com</p>

           <p><span>Phone :</span> (641) 521 - 2653</p>

                <p><span>Address :</span> 23901 S23 HWY, LACONA, IA 50139 </p>

</div>

CSS:

.boxed {

align-content: left;

height: 234px;

width: 500px;

display:inline-block;

    float:left;

background color: #867D7D;

border: 5px solid #0B115A;

background-color: #F4EBEB;

color: #050505;

margin-left: auto;

}

p.example {

margin-left: auto;

Thank you again!!

Blessings,

Mike

[osgood_]

Try getting rid of:

margin-left: auto; , display:inline-block; and align-content: left; (as there is no such thing)

So you are left with:

.boxed {

height: 234px;

width: 500px;

float:left;

border: 5px solid #0B115A;

background-color: #F4EBEB;

color: #050505;

}

margin-left: auto; will just force a <div> to the far right of the container its in.

[Nancy OShea]

alignContent is sometimes used in JavaScript.

HTML DOM Style alignContent Property

But there is no CSS property for

align-content

What you probably want is text-align: left  |  center  |  right  |  justify

CSS Layout - Horizontal & Vertical Align

Nancy

[pziecina · Accepted solution]

Just an update Nancy,

align-content is part of the css flexbox and grid layout specs, and is also included in the wd's for css content alignment in a number of other newer specs in which align-content: left is included.

It is not recommended for use though except in its flexbox and grid syntax, as outside of there syntax it is not well supported

[osgood_]

pziecina  wrote

Just an update Nancy,

align-content is part of the css flexbox and grid layout specs, and is also included in the wd's for css content alignment in a number of other newer specs in which align-content: left is included.

It is not recommended for use though except in its flexbox and grid syntax, as outside of there syntax it is not well supported

I don't think there is an align-content in Flexbox is there?, that's align-items aint it?

I think grid uses align-content though, talk about confusing, even they can't agree on what to use.

[pziecina]

Flexbox align-content

https://www.w3.org/TR/css-flexbox-1/#align-content-property

[osgood_]

pziecina  wrote

Flexbox align-content

https://www.w3.org/TR/css-flexbox-1/#align-content-property

Yeah I just looked it up and was editing my post:

Edit.

Correction theres is  align-content in flexbox. I dont think I have ever used it though its the same as justify-content just works in the other direction.

Edit

Hummm I must have used it,  I centre components vertically all the time. I guess it comes as second nature!

I'm not sure why it was being used in the OPs context as I dont see any reference to Flexbox though...

[pziecina]

osgood_  wrote

I think grid uses align-content though, talk about confusing, even they can't agree on what to use.

There is an 'important' note in the grid specs that says any differences for such items that are not specific to that spec, must be reported. Even though both specs keep mooving backwards, it is mainly in the wording as they are trying to make both the flexbox and grid specs interchangable outside of specific grid/flexbox items.

[osgood_]

pziecina  wrote

osgood_   wrote

I think grid uses align-content though, talk about confusing, even they can't agree on what to use.

There is an 'important' note in the grid specs that says any differences for such items that are not specific to that spec, must be reported. Even though both specs keep mooving backwards, it is mainly in the wording as they are trying to make both the flexbox and grid specs interchangable outside of specific grid/flexbox items.

I'm sure it will all become clear if/when I start using grid/flexbox combined in production. I usually get there in the end.