How to position two divs on either side of the screen, HTML, CSS


Tags: html,css,stylesheet

Problem :

How can I position two divs on the same line on either side of the screen? I.e. 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;  
}


Solution :

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.

http://jsfiddle.net/xy0pj0f9/1/


    CSS Howto..

    Switchery rendered wrong when triggering click after View is shown

    How do I set dynamic width to a block element?

    How to apply @media for css attribute that are set via jquery

    How to draw with CSS canvas a slideshow frame?

    How to add a banner inside a div at the bottom?

    How to set a css class based on content in rails

    How to make text blink on website? [duplicate]

    Show css3 animate for 2 times

    How to limit click area to text?

    How to apply a css class for jqGrid height property setGridHeight?

    How to create shadow in JSF input field

    How do I apply css animations to angular2 components before they are destroyed/removed?

    How to style an input that is a type=“button”?

    How to overwrite “left: 80%” from inline CSS

    how can i use css selector to give style only to a first div between two divs of the same kind?

    How do I get rid of this little green box on my HTML/CSS page [closed]

    How to remove the blank between div.sons?

    How to make a div box with display:flex clickable like display:block?

    how to I use an Arabic font in my css?

    How to float element next to line?

    How to output element.style.marginTop using digits only?

    Getting an class to show when item is clicked

    How to force divs into the same row when using Blueprint CSS

    Can't figure out how to change font color, using jQuery (trying to build a simple menu)

    How to make html elements move up/ down as image height resizes using only css and html

    How to reuse and override Css style?

    How do I increase the spacing between different parts of blockquotes with CSS?

    How to print multiple elements in a page individually using css?

    How to override CSS style assigned to element

    How to get the max width of my css element using javascript