floated divs are overlapping and the inner content is wrapping. How can I make more responsive?
Question
I'm trying to get the following to be more responsive. It seems the two divs are wrapping over each other and only the buttons are flowing w/ the content. How would I go about getting the two divs to be more responsive?
Here is a full page example: http://cssdeck.com/labs/full/eaerpuhb
Here is the code: http://cssdeck.com/labs/eaerpuhb
<html>
<head>
<title> test </title>
<style>
.settings {
max-width: 970px;
display: block;
border: 1px solid #ccc;
padding: 3px;
background-color: #f3f3f3;
text-align: left;
}
.setting {
margin: 5px 0;
display: block;
text-align: left;
}
.name { width: 200px; }
.save {
float: right;
text-align: right;
}
.saveAsNew, .cancel { margin-left: 4px; }
.topRightLinks {
display: block;
float: right;
}
.dashboardSettings {
margin-bottom: 20px;
text-align: right;
}
.divSections {
width: 400px;
margin-top: 5px;
padding: 5px;
border: 1px solid #ccc;
margin-left: auto;
text-align: right;
}
</style>
</head>
<body>
<div class='topRightLinks'>
<div class='dashboardSettings'>
<span class='addSection'>Add Report</span>
<div class='divSections'>
<span>Choose a report:</span>
<select class='ddlAddSection'><option value='1'>Account Analytics</option></select>
<input type='button' value='Add'/>
<input type='button' value='Close'/>
</div>
</div>
</div>
<div class='settings'>
<div class='setting'>Dashboard Name:
<input type='text' maxlength='64' class='name' />
<div class='save'>
<input class='save' type='button' value='Save' />
<input class='saveAsNew' type='button' value='Save As New' />
<input class='cancel' type='button' value='Cancel' />
</div>
</div>
</body>
</html>
1 answers
solution1
1 ACCPTED 2015-10-02 23:36:02
here try this. i guess this is what you are trying to achieve.
* { box-sizing: border-box; } .settings { width: 59%; display: block; border: 1px solid #ccc; padding: 3px; background-color: #f3f3f3; text-align: left; } .setting { margin: 5px 0; display: block; text-align: left; } .name { width: 200px; } .save { float: right; text-align: right; } .saveAsNew, .cancel { margin-left: 4px; } .topRightLinks { display: block; width: 39%; float: right; } .dashboardSettings { margin-bottom: 20px; text-align: right; } .divSections { margin-top: 5px; padding: 5px; border: 1px solid #ccc; margin-left: auto; text-align: right; } .clearfix:after { clear: both; content: ""; display: block; }
<div class='topRightLinks clearfix'> <div class='dashboardSettings'> <span class='addSection'>Add Report</span> <div class='divSections'> <span>Choose a report:</span> <select class='ddlAddSection'> <option value='1'>Account Analytics</option> </select> <input type='button' value='Add' /> <input type='button' value='Close' /> </div> </div> </div> <div class='settings clearfix'> <div class='setting clearfix'>Dashboard Name: <input type='text' maxlength='64' class='name' /> <div class='save'> <input class='save' type='button' value='Save' /> <input class='saveAsNew' type='button' value='Save As New' /> <input class='cancel' type='button' value='Cancel' /> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I prevent DIVs from overlapping a right floated image?
Make a div with three inner floated divs responsive for mobile
How can I vertically align content in floated, fluid divs?
2 divs side-by-side, one floated - how do I make the other fit next to it without overlapping?
How do I keep floated child divs from wrapping?
How can stop text wrapping around some floated divs?
How to make two divs fit a desired width and avoid wrapping and overlapping?
How to make grid Responsive Overlapping Content
How can I align to center floated divs?
Floated divs are not wrapping correctly
Related Tags