My goal is to center a form within a div and have another div on the right that is slightly indented, but I'm struggling to align the elements properly.
How can I achieve this layout using CSS?
Additionally, is there a way to center the right-hand div on a new line if the content exceeds the page width?
.lander-form {
margin: auto;
}
.lander-add {
float: right;
margin-right: 50px;
}
.container-lander {
overflow: auto;
width: 100%;
}
#OEPL_Widget_Form {
min-width: 200px;
max-width: 399px;
margin: auto;
font-weight: 300;
background-color: #F9F9F9;
box-shadow: 5px 5px 5px #888888;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
text-align: left;
border: 3px solid #d9d9d9;
}
#OEPL_Widget_Form div {
margin-top: 10px;
text-align: left;
}
#OEPL_Widget_Form input,
button {
width: 100%;
padding: 3px 5px;
}
.OEPL_Widget_Form textarea {
width: 100%;
padding: 3px 5px;
height: 5em;
text-align: left;
}<div class="container-lander">
<div class="lander-form">
<div class="widget widget_oepl_lead_widget">
<div align='center' class='LeadFormMsg' style='color:red'></div>
<form id='OEPL_Widget_Form' class='OEPL_Widget_Form' method='POST' enctype='multipart/form-data'>
<div style='width: 45%; float:left'>
<p class='small'><label>First Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div style='width: 45%; float:right'>
<p class='small'><label>Last Name <span style='color: red'>*</span> :</label><br><input type='text' /></p>
</div>
<div>
</div>
<p class='small'><label>Your Message <span style="color: red">*</span> :</label><br><textarea cols="30" rows="5"></textarea></p>
<p><input type='submit' name='submit' style='' value='Submit' id='WidgetFormSubmit' class=''></p>
</form>
</div>
</div>
<div class="lander-add">
<div class="laura" id="laura-935032319"><img width="200" src='http://www.freevectors.net/files/large/10CarsVectorSet.jpg' /></div>
</div>
</div>