basically i want to create a layout such as this
wherein in the left panel, the elements are laid out verticaly at first (text1 and input text) and then text2 with input box and text3 with input box are then laid out horizontally.
<html>
<head>
<title>Templated client</title>
<style>
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 500px;
height: 150px;
margin-right: 50px;
}
.aParent div {
float: left;
clear: none;
}
.selectWrapper{
border-radius:36px;
display:inline-block;
overflow:hidden;
background:#cccccc;
border:1px solid #cccccc;
}
.selectBox{
border-radius:36px;
width:140px;
height:40px;
border:0px;
outline:none;
}
</style>
</head>
<body>
<div class="aParent">
<div vertical layout id="rcorners4">
<div>
<p>Text1</p>
<select class="selectBox">
<option selected disabled>Choose here</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</div>
<div>
<p>Text2</p>
<input type="text" value="Test text"/>
<p>Text 3</p>
<input type="text" value="Test text" />
</div>
</div>
<div id="rcorners4">
<p>Text4</p>
<input type="button" value="Test text"/>
</div>
</div>
</body>
</html>
however im having a hard time adjusting to it. Im from desktop dev discipline and things like this can be done by doing horizontal layout inside vertical layout and it just works, it seems like a pain in CSS.
result:
