Placement of Header Box Contents

[Star's Legacy]

Forum URL: mittenstest.boards.net/

So here on my test site I am fiddling around with some things. Right now I have a box in my header and I would like the Staff table to sit to the right of the About Us. I tried moving it up above the About Us section and that kicked it out of the light colored box entirely. I am not the best with coding so perhaps I could have approached the whole thing a different way to achieve a better outcome?

[Azy]

You can set margin values and push the div around pretty much anywhere you want. Try this in the CSS:

.lower_inner2 {
margin-top: -142px;
margin-right: 20px;
}

Given the tabular and fixed nature of the structure though, it might be easier doing the whole section as a table. That'd also help with the staff table positioning oddness I'm seeing. If you're seeing it too, set the table width of the staff table to 300px.

[Tumbleweed]

Star's Legacy

If you want to get your floats right so they flow naturally, I did a quick mock-up of how I'd do it. Mind you I left borders around some divs so you can see if you have room to spare. Each site is a bit different so you may likely need to tweak some widths.  As seen here:

abetteramerica.freeforums.net/page/test-page-two

Wasn't sure how you wanted your images and text in the staff section and I left your filler text out but tested to make sure the manual scroll bars appear, and they do. Also ignore the colors as it is picking up my theme colors.


I have the mock-up on a custom page so needed the style tags but if you put in your style sheet be sure to remove them.

<style>
/*this is the width height of the whole top table*/
.my_top_info {
position: relative;
margin: auto;
width: 980px;
height:420px;
background-color:white;border:1px solid orange;height:420px;
}
/*houses both columns on left side of shout box*/
/*980 px minus shout box width 350px equals 630px minus padding*/
#info_side{
float:left; width:610px;
border:1px solid red;    
}
/*houses all info for about-news-ICnews*/    
#inner_left_side{
float:left; width:260px;padding:8px;
border:1px solid green;
}
/*houses info on the right  ie:staff*/    
#inner_right_side{
float:right;width:308px;padding:8px; margin-right:3px;
border:1px solid purple;  
}
/*manual scroll bar containers*/
#info{
padding: 10px; width: 240px; height: 100px; overflow: auto; position: relative; -ms-overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/*all the staff coding*/
#info_staff{
padding:4px;    
}
#inner_staff_left{
width:140px; height:80px;padding:2px;font-size:10px;float:left;text-align:left;
}
#inner_staff_right{
width:140px; height:80px;padding:2px;font-size:10px;float:right;text-align:right;
}
#inner_staff_left img{
border: 3px solid rgb(255, 118, 25); border-image: none; width: 50px; height: 50px; margin-right:6px;
float:left;
}
#inner_staff_right img{
border: 3px solid rgb(255, 118, 25); border-image: none; width: 50px; height: 50px; margin-left:6px;
float:right;
}
/*the shout box div*/
#the_shout_bx{
float:right;width:350px; margin-right:6px;
border:1px solid blue;
}
</style>

<div class="my_top_info">

<div id="info_side">

<div id="inner_left_side">  

        <div class="my_title">About Us</div>
<div id="info">
Content
</div>

        <div class="my_title">News</div>
<div id="info">
    Content here
</div>

        <div class="my_title">In-Character News</div>
<div id="info">
  Content here
</div>
            </div>

  <div id="inner_right_side">  
       
<div id="info_staff">
    <div class="my_title">Staff</div>
  <hr>
<div id="inner_staff_left" style="float:left;">
<img src="http://i1382./ah261/SA_Echo/Nocturnae/Icons/2egdxyv_zps1iow1blg.jpg">
<b>Echo</b><br>
<i>Administrator</i>
<a href="">PM</a> | <a href="">Profile</a>
    </div>

<div id="inner_staff_right">  
<img src="http://storage.proboards.com/5510758/a/YE7B0U3PH7lmY5qB_sdI.jpg">
<b>Alice</b><br>
<i>Moderator</i>
<br><a href="">PM</a> | <a href="">Profile</a>
            </div>  

         

<p style="clear:both;"></p>

           

<div id="inner_staff_left">    
<img src="http://storage.proboards.com/5510758/a/TyNYN72Ewhqyb2r1OgDn.jpg">
<b>Tera</b><br>
<i> Moderator</i>
<br>  <a href="">PM</a> | <a href="">Profile</a>
            </div>            



    <div id="inner_staff_right">        
<img src="http://vignette2.wikia.nocookie.net/todeswache/images/b/b1/Ash.png/revision/latest?cb=20141111183445">
<b>Missphoenix</b><br>
<i>Moderator</i>
<br><a href="">PM</a> | <a href="">Profile</a>
</div>

            <p style="clear:both;"></p>
<hr>
</div>

<!--end of staff section-->        

<div id="info2">
    <div class="my_title">Title</div>
    Content here
</div>
<!--end of second box-->

       <div id="info2">
    <div class="my_title">Title</div>
    Content here
</div>
<!--end of third box if you want one-->    

</div>
</div>    

<div id="the_shout_bx">
   Shout box
</div>

</div>
<p style="clear:both;"></p>
You can use this or not. Just an alternative to Azayles suggestion. I'm personally try to avoid margins for too much for positioning if floats work, but that is just me. 

[Azy]

Indeed, margins aren't the best. Different browsers (well, one browser. We all know which one) render the margins slightly different because of the way the box model is interpreted.
Definitely go with Tumbleweed's code, it's so like her to take an idea and run with it   She absolutely rocks at this 

[Star's Legacy]

Azy & Tumbleweed I haven't had much time lately to fiddle around with the coding, but so far it seems to be working out just fine! ^^ Thank you guys!

[Azy]

You're very welcome! Glad you got it working, 'couldn't have done it without Tumbleweed

[Star's Legacy]

Azy & Tumbleweed: Well I was fiddling around with it and I sort of broke it for lack of better words. It is probably some simple thing such as adding in an extra closing div. Could one of you perhaps shed some light on this please? ^^

~ mittenstest.boards.net/

EDIT: I fixed it! ^^