CODEWITHSUNDEEP
css
apss1943
apss1943

Reputation: 269

How to let div align left?

I want my div from this

-------------------------------
|div A                        |
-------------------------------
|div B                        |
-------------------------------
|div C                        |
-------------------------------

https://jsfiddle.net/apss/tqap7oc3/

to this one 

-------------------------------
|div A         |div B         |
-------------------------------
|div C                        |
-------------------------------

I knew this may be a very simple question. Pardon me! Because it works fine neither float:left or display:inline. Help me.

Upvotes: 4

Views: 229

Answers (6)

apss1943
apss1943

Reputation: 269

Html:

<div>
    <div class = "firstColumn" >
    aaa
    </div>
    <div class = "subColumn" >
    bbb
    </div>
    <div class = "subColumn" >
    ccc
    </div>
</div>

CSS:

.firstColumn, .subColumn{
  border-radius: 8px;
  border: 2px solid #18786C;
  padding: 5px;
  box-sizing: border-box;
float: left;
width: 100%;
}
.firstColumn {
    width: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.subColumn:nth-child(2){
    width: 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.subColumn:nth-child(3){
  border-top: none;
}

https://jsfiddle.net/apss/tqap7oc3/3/

Upvotes: 0

Felix A J
Felix A J

Reputation: 6470

.firstColumn, .subColumn{
  border-radius: 8px;
  border: 2px solid #18786C;
  padding: 5px;
  box-sizing: border-box;
float: left;
width: 100%;
}
.firstColumn {
width: 50%;
}
.subColumn:nth-child(2){
width: 50%;
}
.subColumn:nth-child(3){
  border-top: none;
}
	<div>
		<div class = "firstColumn" >
		aaa
		</div>
		<div class = "subColumn" >
		bbb
		</div>
		<div class = "subColumn" >
		ccc
		</div>
</div>

Upvotes: 2

Germano Plebani
Germano Plebani

Reputation: 3625

This my solution. If possible i prefer inline-block instead of float.

.topColumn {
    width: 46%;
    display: inline-block;
  border-radius: 8px;
  border: 2px solid #18786C;
  padding: 5px;
}

.subColumn {
  border-radius: 8px;
  border: 2px solid #18786C;
  padding: 5px;
  border-top: none;
}
	<div>
        <div class="firstRow">
			<div class = "topColumn" >
			aaa
			</div>
			<div class = "topColumn" >
			bbb
			</div>
        </div>
			<div class = "subColumn" >
			ccc
			</div>
	</div>

https://jsfiddle.net/eyfksp46/3/

Upvotes: 1

Farhad Manafi
Farhad Manafi

Reputation: 334

//add to css class
.firstColumn {
    float:left;
}

.subColumn {
    float:right;
}

Upvotes: 0

yakutsa
yakutsa

Reputation: 652

I have implemented a new class called "half" and added to the "firstColumn" and second "subColumn".

.half{
    display: inline-block;
    width: 200px;
    border-top: 2px solid #18786C;
    margin-bottom: 4px;
}

Working demo

Upvotes: 0

pavel
pavel

Reputation: 27072

There are many ways how to do it, for example with float.

.firstColumn, .subColumn {width: 200px; float: left;}
.subColumn + .subColumn {clear: left; width: 414px;}

https://jsfiddle.net/tqap7oc3/4/

Widths are in pixels, you can use what you need, eg. percents, whatever.

Upvotes: 0

Related Questions