How to position two divs on either side of the screen, HTML, CSS
Question
How can I position two divs on the same line on either side of the screen? Ie one is floated left and the other floated right? When I try to do this the containing div gets cut in half.
Heres my code: http://jsfiddle.net/xy0pj0f9/
<div class="wrapper">
<div class="top-panel-sub">
<div class="port-name">
<h3>Name</h3>
</div>
<div class="admincp-button">
<img src="themes/images/loginsml.png"/>
</div>
</div>
</div>
.top-panel-sub {
background-color: #bf2f1b;
color:#fff;
padding-top:10px;
padding-bottom:10px;
padding-right:5px;
padding-left:5%;
font-family:Trajan-Pro-Bold;
}
.port-name {
display:block;
float:left;
}
.port-name h3{
display:block;
}
.admincp-button {
display:block;
}
4 answers
solution1
2 ACCPTED 2014-12-12 17:49:47
Floated elements don't provide any stack flow so you need to override the overflow rule to tell the parent to behave as if the floated children were not floated.
Just add overflow : hidden; or overflow : auto; to the .top-panel-sub container.
solution2
1 2014-12-12 17:55:20
You could use a clearfix. Check out this article http://css-tricks.com/snippets/css/clear-fix
You would just add this to your CSS
.group:after {
content: "";
display: table;
clear: both;
}
And a group class to the containing element top-panel-sub
solution3
1 2014-12-12 18:04:47
Set the width on both divs. I set the width to 50% on each of the divs in question and set the appropriate float for each (I also commented out the padding on .top-panel-sub).
.top-panel-sub { background-color: #bf2f1b; color:#fff; /* padding-top:10px; padding-bottom:10px; padding-right:5%; padding-left:5%; */ font-family:Trajan-Pro-Bold; } .port-name { display:block; float:left; width:50%; background:blue; } .admincp-button { display:block; float:right; width:50%; background:yellow; text-align:right; }
<div class="wrapper"> <div class="top-panel-sub"> <div class="port-name"><h3>Name</h3></div> <div class="admincp-button"><img src="themes/images/loginsml.png"/></div> </div> </div>
solution4
0 2014-12-12 19:25:23
You can have something like the following:-
<style>
.top-panel-sub {
background-color: #bf2f1b;
color:#fff;
padding-top:10px;
padding-bottom:10px;
padding-right:5px;
padding-left:5%;
font-family:Trajan-Pro-Bold;
}
.port-name {
display:block;
float:left;
}
.port-name h3{
display:block;
}
.admincp-button {
display:block;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="top-panel-sub" style="height:50px">
<div class="port-name" style = "float:left; width: 50%;">
<h3>Name</h3>
</div>
<div class="admincp-button" style = "float:right; ">
<img src="smiley.gif" />
</div>
</div>
</div>
</body>
you can include the in place styles separately, just for demo I have included them in tags itself. Kindly Mark it as answer if you find it useful.
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.