this should be simple but it seems to be a mess. Just want the site_name to the left with a little padding, and server:server_name to the right of it. Easy right? everything else in the css works great, but anything regarding moving the text is failing.
below is the mess i ended up with
originally it was basically margin-top,margin-bottom: auto, but that did not work
ps old guy here from the old days of “hotdog” editor (if you don’t remember that your too young hahaha), I finally see how nice CSS can be… so trying my hand at simple stuff. (failing miserably )
<div id="banner">
<div class="site_name">COOL SITE</div>
<div class="server_label">Server: </div>
<div class="server_name"><?=SERVER_NAME;?></div>
</div>
AND THE CSS
#banner {
width:100%;
height:80px;
background-color: #0092BC;
}
#banner .site_name {
font-size: 30px;
font-weight: bold;
top: 20px;
display: inline-block;
color: white;
position: relative;
padding-left: 100px;
}
#banner .server_label {
display: inline-block;
padding-left: 50px;
top:17px;
color: lightgray;
font-size: 20px;
font-weight: bold;
position: relative;
}
#banner .server_name {
display: inline-block;
top:18px;
position: relative;
color:black;
font-size: 20px;
}