CODEWITHSUNDEEP
htmlcss
user3100193
user3100193

Reputation: 561

div align on the left of centered div

I need to do next thing:

i need on div to be centered in the middle of the page

.container12
    {
    max-width: 960px;
    width: 100%;
    height: auto;
    overflow: hidden;

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

and i need another div whose class name is "leftDiv" which will be on the left side of div with class "container12". .leftDiv should float on the left side of .container12 and have width from end of the page to the left side of the .container12.

Here is the picture: enter image description here

How to write class for leftDiv?

Upvotes: 0

Views: 50

Answers (2)

Brian
Brian

Reputation: 4344

Here's a simple method you could use based on your question:

.container12 {
  width:50%;
  height:200px;
  border:1px solid black;
  display:inline-block;
}
.leftDiv {
  width:25%;
  height:200px;
  border:1px solid black;
  display:inline-block;
  float:left;
}

Remember that floats pull elements out of the flow of the page, so you need to apply a clearfix to the centered div to keep elements aligned properly.

CodePen demo

Upvotes: 2

Martin McKeaveney
Martin McKeaveney

Reputation: 508

add float:left to each element and they should line up side by side. Something like this - 

.container12
        {
        max-width: 960px;
        width: 100%;
        height: auto;
        overflow: hidden;
        float:left;

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

    .leftDiv {
        width: 40%; 
        height: auto;
        overflow: hidden;
        float:left;

    }

Make sure to play around with the widths etc and you should get what you need.

Upvotes: 0

Related Questions