Jump to content

Need a quick fix on a box model please


baser-b

Recommended Posts

<html>
<style>

.box {
	color: #d0d0d0;
	font-weight: 300;
	padding: 30px 0;
	background: #336699;
}

.whatever {
   float: left;
   background-color: #336699;
   color: white;
   padding: 10px;
   font-family: Candara, Sans-Serif;
   width: 400px;
 }

.buttonbox {
    float: right;
    background-color: #FFFFFF;
	padding: 4px;
	align: right;
	width: 131px;
}
 </style>
 
 <div class='box'>Here's some shit for whatever.</div><br><br><br>
 <div class='whatever'><b>User:</b> $user | <b>Project ID: </b>00021<br><small><b>Last Login:</b> @ 4:32 / 12 June 2018</small>
 <div class='buttonbox'><a href='account.php'><small> <button>Settings</button></a> <a href='logout.php'><button>Logout</button></a></small></div></div>
 </html>

Basically all I want is the "buttonbox" to be in the center next to the 'User: and Project ID: with Last Login underneath' text with any extra trimmed to be evenly padded and look nice. I am having trouble figuring it out.

Link to comment
Share on other sites

<style>

.whatever {
   position: relative;
   display: flex;
   float: left;
   background-color: #336699;
   color: white;
   padding: 10px;
   font-family: Candara, Sans-Serif;
   /* width: 400px; */
 }
 
.whateverer {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 10px;
}

.buttonbox {
    display: flex;
    float: right;
    background-color: #FFFFFF;
    padding: 5px;
    align: right;

}

</style>

<br><br>
 <div class='whatever'><b>User:</b> $user :: <b>Project ID: </b>00021<div class='whateverer'><small><b>Last Login:</b> @ 4:32 / 12 June 2018</small></div>
 <div class='buttonbox'><a href='account.php'><small><button>Settings</button></a> <a href='logout.php'><button>Logout</button></a></small></div></div>

This is almost exactly what I want EXCEPT User: $user | Project ID: 0002 and the Buttons are shmooshed together.

To make it easier to see what I'm talking about here's a link: http://hosted.olivermoore.co/testing.html

 

Link to comment
Share on other sites

When working with HTML and CSS you must stop yourself from thinking that the answer to your problem is to throw even more markup at it.

<style>

div.container {
	background-color: #336699;
	color: white;
	display: inline-block;
	font-family: Candara, sans-serif;
	padding: 10px;
}
div.container > * {
	display: inline-block;
	vertical-align: middle;
}

div.buttons {
	background-color: #fff;
	padding: 5px;
}
div.info p {
	margin: 0px;
}

</style>

<div class="container">
	<div class="info">
		<p><strong>User:</strong> $user :: <strong>Project ID:</strong> 00021</p>
		<p><small><strong>Last Login:</strong> @ 4:32 / 12 June 2018</small></p>
	</div>
	<div class="buttons">
		<button><small>Settings</small></button>
		<button><small>Logout</small></button>
	</div>
</div>

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.