Jump to content
Sign in to follow this  
Honest989

'Simple' HTML/CSS problem with rotations.

Recommended Posts

Hi all,

Bit of an 'interesting' problem. I'm trying to do a really simple layout template in html/css. (it's simple as it's destined for a confluence page so the less fancy the better)

The layout is relatively simple - The aim was to have three menu containers side by side. The third and final box of the three was to have rotated menu buttons.

I face two problems with what my code produces.

#1 In the third yellow box you will see that I have two rotated divs. The space between them is massive and the container for them behaves... oddly - it expands massively.. What I wanted was for the container to scale in size with the content as there should be five menu buttons in there, not just two. And they should be spaced out with really only 2-5 px between them.

#2 I can't seem to get the containers to centre vertically within the parent container.

(feel free to ignore the title bar. I was going to scale that across later when finished)

 

Can someone assist me here? 

 

<!DOCTYPE html>
<html>
<head>
<style>
.screencontainer{
margin: 0 auto;
display: block;
xxheight: auto;
xxmax-width: 90%;
align-items: middle;
}

.foundations-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
xxheight: auto;
margin: auto;
}
.foundations-content{
display: block;
width:200px;
height:50px;
background-color: lightblue;
margin: auto;
margin-top: 10px;
text-align: center;
color: white;
}
.foundations-button{
display: inline-block;
width:20px;
height:20px;
background-color: blue;
margin: auto;
margin: 10px;
text-align: center;
color: white;
}
.search-wrapper{
display: inline-block;
background-color: yellow;
padding: 10px;
xxheight: auto;
margin: auto;
}
.search-content{
display: inline-block;
height:50px;
width:200px;
background-color: lightblue;
margin: 0 auto;
text-align: center;
color: white;
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

.titlebar{
display: block;
width:404px;
height:20px;
border-radius:10px;
background-color: red;
text-align: center;
color: white;
}
</style>
</head>
<body>
<div class="screencontainer" style="border: 1px solid black;">
<div class="titlebar">1</div>
<div class="foundations-wrapper">
 	<div class="foundations-content">1</div>
	<div class="foundations-content">1</div>
	<div class="foundations-content">1</div>
	<div class="foundations-content">1</div>
	<div class="foundations-content">1</div>
	<div class="foundations-content">1</div>
	<div class="foundations-content">1</div>
	
</div>
	<div class="foundations-wrapper">
 		<div class="foundations-content">
			<div class="foundations-button">1</div>
			<div class="foundations-button">1</div>
			<div class="foundations-button">1</div>
		</div>
		<div class="foundations-content">
			<div class="foundations-button">1</div>
			<div class="foundations-button">1</div>
			<div class="foundations-button">1</div>
		</div>
		<div class="foundations-content">
			<div class="foundations-button">1</div>
			<div class="foundations-button">1</div>
			<div class="foundations-button">1</div>
		</div>
</div>


<div class="search-wrapper">
 	<div class="search-content">1</div>
	<div class="search-content">1</div>	
</div>
</div>	
</body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×