CSS和html中的位置问题

Question

I'm having a problem with a CSS. I have a little image with the problem:

The first part show what happend when in the block "Contenido" it's empty, and the second part when it has something. The problem? The second botton use a break and appear under of the other bootom. I have tried a pair of styls, but i can't get with one that work. What i have in CSS and html?

<div class="nav-pad">
    <button id="previous_left" class="button_previous">
        <img src="/images/left-arrow.png"/>
    </button>
    <div id=info_left>
         Here we could put some info but it give a problem
    </div>
    <button id="next_left" class="button_next">
        <img  src="/images/right-arrow.png"/>
    </button>
</div>

And in the CSS i have this one:

.nav-pad{
  padding: 0.2em;
  postion: relative;
}
.button_next{
  float:right;
  right:0
}
.button_previous{
  left:0;
}

Any clue what i'm doing bad? Thanks a lot! Roberto

Answer 1

I edited your HTML and CSS a little bit but I made it work, I am still not sure what you are trying to get here.

The code may need to change in order to get better results

click on the link bellow to see an example of the answer

• http://jsfiddle.net/TkNDS/2/

Answer 2

Did u gave any width for the nav-pad div, if yes then remove it.

Else try adding overflow:auto to the nav-pad class..

Can you please give us a sample page with this style and content, so that we can figure out the exact error..

Answer 3

.nav-pad {}
.button-next { display:inline-block }
.button-previous { display:inline-block }
#info-left { display:inline-block }

Answer 4

To accomplish the same layout, What I will do is:

.nav-pad{
  padding: 0.2em;
  clear:both;
  overflow: hidden;
}
.button_next{
  float:right;
}
.button_previous{
  float: left;
}
#info_left{
    float: left;
}

Answer 5

Well i have solved. The help that you give me, give me a clues to solve it: With this html:

<div class="nav-pad">    
<button id="previous_left" class="button_previous">
    <img src="http://www.baltimark.com/_/rsrc/1234983635623/public/tech/stackoverflow-logo-250.png"/>
</button>       
<div id="info_left">
     Here we cdfgdfould put some info but it give a problem
</div>        
<button id="next_left" class="button_next">
    <img  src="http://www.baltimark.com/_/rsrc/1234983635623/public/tech/stackoverflow-logo-250.png"/>
</button>
</div>

and this css:

.nav-pad{
  padding: 0.2em;
  border: solid 1px green;
  overflow: auto;
}

.button_previous{
  float: left;
  width : 15%;
}

.button_next{
  float:right;
  width : 15%;
}
#info_left {
  float: left;   
  width : 70%;
}

Thanks a lot!