Geek Answers Handbook

How to display div to the left?

I want my div to be

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

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

to that

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

I knew this could be a very simple question. Sorry! Because it works great neither float:left, nor display:inline. Help me.

+4
source share
6 answers

.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>
Run codeHide result
+2
source

This is my decision. If possible, I prefer the inline block over the 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>
Run codeHide result

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

+1
source

, , float.

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

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

, , , . , .

0

"half" "firstColumn" "subColumn".

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

0

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

.subColumn {
    float:right;
}
Hide result
0

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/

0

More articles:


All Articles