I need to make a layout in CSS, somewhat like this.
Green & red are 2 squares on left and right corners respectively. How do I make Yellow region occupy all the space in between, and also align the text in ('Login', in the screenshot) as centered.
Also I tried couple of things with Twitter-Bootstrap too. col-md-1, pull-left etc. didn't quite achieve what I intended. Any help is appreciated.
Here is my working code (without any Bootstrap)
<head>
<style>
#myContainer{
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
}
#leftLogo{
width:40px;
height:40px;
background-color: green;
float:left;
}
#rightLogo{
width:40px;
height:40px;
background-color: red;
float:right;
}
#labelText{
height:40px;
float:left;
width:100%-80px;
background-color: #f3ff11;
}
</style>
</head>
<body>
<div id="myContainer">
<span id="leftLogo"></span>
<center>
<span id="labelText"><H2>Login</H2>></span>
</center>
<span id="rightLogo"></span>
</div>
You can use display:table and display:table-cell to achieve this.
First fix your markup:
<div id="myContainer">
<span id="leftLogo"></span>
<span id="labelText"><h2>Login</h2></span>
<span id="rightLogo"></span>
</div>
Then your CSS:
div, span, h2 {
margin:0;
padding:0;
}
#myContainer {
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
display:table;
}
#leftLogo, #rightLogo, #labelText {
display:table-cell;
height:40px;
}
#leftLogo, #rightLogo {
width:40px;
}
#leftLogo {
background-color: green;
}
#rightLogo {
background-color: red;
}
#labelText {
text-align:center;
background-color: #f3ff11;
}
Demo: http://jsfiddle.net/TjGC3/
You can use position:absolute; to position your colored squares inside a wrapper with position:relative and width:100%;
FIDDLE
HTML:
<div id="myContainer">
<div id="labelText">
<span id="leftLogo"></span>
<H2>Login</H2>
<span id="rightLogo"></span>
</div>
</div>
CSS:
#myContainer{
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
}
#leftLogo{
width:40px;
height:40px;
background-color: green;
position:absolute;
top:0;
left:0;
}
#rightLogo{
width:40px;
height:40px;
background-color: red;
position:absolute;
top:0;
right:0;
}
#labelText{
height:40px;
width:100%;
background-color: #f3ff11;
position:relative;
text-align:center;
}
h2{
line-height:40px;
margin:0;
padding:0;
}
Related
Here is my fiddle
http://jsfiddle.net/8BJ94/68/
I need the buttons to be positioned centrally with a bit of padding around each one in the footer.
I've very close but the buttons seems to be overflowing off the bottom of the page?
html, body {
height:100%;
width:100%;
margin:0;
}
div#footer{
width:100%;
height:10%;
bottom:0;
top:90%;
left:0;
background-color:#2A2A2A;
position:fixed;
display:table-cell;
vertical-align:middle;
}
#button {
height : 90%;
width : 30%;
background-color : #FFFFFF;
margin:1.666%;
text-align:center;
float:left;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
#button:before {
content:'';
height:10%;
vertical-align:middle;
display:inline-block;
}
<div id="footer">
<div id="button">button text</div>
<div id="button">button text</div>
<div id="button">button text</div>
</div>
I have changed a lot of your css, this is what I have now:
http://jsfiddle.net/wf_4/8BJ94/78/
html, body {
height:100%;
width:100%;
margin:0;
}
html {
display:table;
}
body {
display:table-cell;
vertical-align:middle;
background:#48a;
text-align:center;
}
div#footer {
width:100%;
height:10%;
min-height:40px;
bottom:0;
left:0;
background-color:#2A2A2A;
position:fixed;
padding:8px;
display:table;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.button {
height : 50%;
width : 30%;
background-color : #FFFFFF;
margin:auto 2%;
display:table-cell;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
.button:before {
content:'';
height:100%;
vertical-align:middle;
display:inline-block;
}
.buttonGap {
height:50%;
width:1%;
display:inline-block;
}
and HTML:
<div id="footer">
<div class="button">button text</div>
<div class="buttonGap"></div>
<div class="button">button text</div>
<div class="buttonGap"></div>
<div class="button">button text</div>
</div>
I think that's what you need:
http://jsfiddle.net/e2262/1/
What was frorcing your footer to don't be elastic vertical (in height was)
div#footer {
height:10%;
top:90%;
}
SO i get ride of those 2 attribute in the CSS. Now it's anchored to the bottom and as the buttons grow the footer is able to grow in height ;)
Note: never use multiple elements with the CSS id attribute. I swapped with CSS classes
Just set the height of the button class to smaller, like this (note: I changed the button id's into classes, as id's should be unique - also pointed out by one of the commenters):
.button {
height : 60%; // <-- changed this
width : 30%;
background-color : #FFFFFF;
margin:1.666%;
text-align:center;
float:left;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
}
Fiddle here
I've updated my solution using flex-box:
HTML:
<div id="footer">
<div class="button">button text</div>
<div class="button">button text</div>
<div class="button">button text</div>
</div>
CSS:
div#footer{
position:fixed;
height: 10%;
bottom:0;
left:0;
right:0;
background-color:#2A2A2A;
padding:0;
margin:0;
text-align:center;
display: flex;
justify-content: space-around;
align-items: center;
}
#footer .button {
display: inline-block;
background-color : #FFFFFF;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
border-radius: 1em;
width: 30%;
height: 80%;
line-height: 25px;
}
JSFiddle
I am trying to make the sidebar fill the height between the header and foot. As you can see it is going behind the footer. I would like it to stop at the top of the footer. Any help would be great!
Demo at: http://www.jsfiddle.net/pEbhK/
The HTML:
<div class="header">
<h2>Development Area</h2>
</div>
<div class="sidebar">
<h2>Current Projects</h2>
<ul>
<li>iCalendar</li>
<li>MyBand - Student Center</li>
</ul>
<h2>Future Projects</h2>
<ul>
<li>Mobile Application</li>
<li>RSS Feed</li>
</ul>
</div>
<div class="clear"></div>
<div class="footer">© 2013</div>
The CSS:
html, body, h1, h2 {
margin:0px;
padding:0px;
}
.clear {
clear:both;
}
.header {
display:inline-block;
width:100%;
background:#ABBFF2;
height:100px;
border-bottom: 5px solid #7F9DEB;
text-align:center;
}
.header h2 {
padding-top:38px;
}
.sidebar {
position: fixed;
height:100%;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
.sidebar h2 {
text-align:center;
}
.footer {
position:fixed;
display:inline-block;
bottom:0px;
width:100%;
height:30px;
border-top:5px solid #7f9deb;
text-align:center;
}
Try height:calc(100% - 140px) in .sidebar
.sidebar {
position: fixed;
height:calc(100% - 140px);
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
float:left;
}
updated jsFiddle File
A non-calc() way of doing this...
Your sidebar and footed have position: fixed, so they are positioned with respect to the view port.
You can size the sidebar using the following CSS:
.sidebar {
position: fixed;
top: 105px;
bottom: 35px;
left: 0px;
width:250px;
background:#ABBFF2;
border-right:5px solid #7F9DEB;
}
The value for the top offset is the header height + 5px for the border. Likewise, the bottom offset is the footer height + 5px for its border.
See demo at: http://jsfiddle.net/audetwebdesign/Lfpxq/
Note: You may want to add a min-height to the sidebar to prevent the content overflow issues. I think the same issue arises when using the calc() method.
Or write this to .footer in the css
background-color: #fff;
i have a problem in aligning the div's vertically,what should be problem?
here is my html code
<div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
</div>
css
.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
clear:both;
position:relative;
margin-left:5px;
margin-top:5px;
}
#profile2
{
position:relative;
margin-left:310px;
margin-top:5px;
}
#profile3
{
position:relative;
margin-left:620px;
margin-top:5px;
}
i want the three div's to be aligned vertically together inside the parent, here is the demo
I'm not sure why you need so many redundant codes to achieve like what you describe, just do:
.recentProfiles
{
width:300px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
Demo: http://jsfiddle.net/VvqXF/
That's because of your margins. If you take clear:both off profile1 and then add float: left onto all profiles, then take off those margins.
Demo: http://jsfiddle.net/WC5gT/
Try using float:left on class profiles and then no margin on profile1, profile2, profile3
Working example: http://jsfiddle.net/rK38V/
Have all the boxes float left (float: left) and remove all margin properties, like this: http://jsfiddle.net/2ABmU/
You get the idea of float wrong. Here's the new code: http://cdpn.io/AvJqI
HTML
<div class="recentProfiles">
<div class="profiles" id="profile1">
</div>
<div class="profiles" id="profile2">
</div>
<div class="profiles" id="profile3">
</div>
<div class="floatClear"></div>
</div>
CSS
.recentProfiles
{
width:950px;
height:200px;
border:2px dotted green;
margin-left:20px;
margin-top:10px;
}
.profiles
{
width:300px;
height:190px;
border:2px dotted black;
}
#profile1
{
float:left;
position:relative;
margin-left:5px;
margin-top:5px;
}
#profile2
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}
#profile3
{
float:left;
position:relative;
margin-left: 10px;
margin-top:5px;
}
.floatClear {
clear: both;
}
I have two divs one inside another, i would like to overlap one div with other and also use css idnex, but ie doesn't let me do this, is there some kind of workaround?
Please view this code in IE since it works in other browsers.
Here is jsfiddle: http://jsfiddle.net/xkDCX/1/
And the code:
<div class="container">
<div class="button"></div>
<div>
body{
margin:50px;
}
.container{
position:relative;
width:410px;
height: 300px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index:22;
}
.button{
width:20px;
height:20px;
border:2px solid black;
position:absolute;
right:-10px;
top:-10px;
background:black;
z-index:11;
}
The thing here is that the filter you added doesnt work at all only in IE so when you see the style in other browsers they dont recognize it at all.
UPDATE:
Would this worked out for you?
<div class="container">
<div class="button">
<div class="but"></div>
</div>
<div class="background"></div>
<div>
<style>
body{
margin:50px;
}
.container{
position:fixed;
width:410px;
height:300px;
margin:0;
padding:0;
}
.container .background{
position:fixed;
bottom:0px;
left:0px;
width:100%;
height:100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index: 50;
}
.container .button{
position:absolute;
width:410px;
margin-left:auto;
margin-right: auto;
z-index: 100;
}
.container .but{
position:absolute;
width:20px;
height:20px;
background:black;
right:-10px;
top:-10px;
border:2px solid black;
}
</style>
jsFiddle:
How do I make div2 + Button2 fill the rest of the window width if I use pixel metric on column 1 and 3?
I'll use that to format a form making a textbox to change the size as two other fields are fixed.
Thank you.
CSS
td { border:solid 1px #000; float:left; }
#div1 { width:100px; border:solid 1px #000; float:left; }
#div2 { border:solid 1px #000; float:left; }
#div3 { width:100px; border:solid 1px #000; float:right; }
#Button1 { width:100% }
#Button2 { width:100% }
#Button3 { width:100% }
HTML
<div id="div1">
<button id="Button1">Button 1</button>
</div>
<div id="div2">
<button id="Button2">Button 2</button>
</div>
<div id="div3">
<button id="Button3">Button 3</button>
</div>
Another solution is moving the second DIV to the bottom and applying margins on it without float: http://jsfiddle.net/xC7uZ/6/
As far as I know, there are only two ways of doing this:
Using tables - most people do not like this idea. I for one, think it's fine for overall layout as long as you don't go overboard with nested tables and stuff. Kalle's answer covers this option
Using absolute positioning specifying all four corners. I only recently discovered this method and it works beautifully. It works in all major browsers.
Something like this:
#div1 { position:absolute; left: 0px; width: 100px; border:solid 1px #000; }
#div2 { position:absolute; left: 100px; right: 100px; border:solid 1px #000; }
#div3 { position:absolute; right: 0px; width:100px; border:solid 1px #000; float:right; }
Here is one to make you guys think :)
<div class="maincontainer">
<div class="column01">
<div class="restraint">
<p>Left column</p>
</div>
</div>
<div class="column03">
<div class="restraint">
<p>Right column</p>
</div>
</div>
<div class="column02">
<div class="restraint">
<p>Middle column</p>
</div>
</div>
</div>
and the CSS:
.maincontainer {
position:relative;
overflow:hidden;
}
.maincontainer .column01 {
float:left;
}
.maincontainer .column01 .restraint,.maincontainer .column03 .restraint {
width:200px;
}
.maincontainer .column03 {
float:right;
}
.maincontainer .column02 {
overflow:hidden;
}
.maincontainer .column02 .restraint {
width:100%;
}
* html .maincontainer .column02 {
display:inline-block;
}
I will get hammered for using <table>, but this is the most flexible and crossbrowser method. It works in ie5 ^^
http://jsfiddle.net/hobobne/24urb/
En este ejemplo vemos como poner tres columnas, de las cuales, dos tienen tamaño fijo.
Three columns and one column with 100% and two columns with fixed width.
jsfiddle
CSS
div, span, label, li, ul
{
box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.cabecera
{
top:0px;
left:0px;
width:100%;
height: 100px;
display: table;
position: absolute;
border:1px solid orange;
}
.row
{
width:100%;
display: table-row;
}
.column_izq
{
width:60px;
height:100%;
display: table-cell;
white-space: nowrap;
vertical-align: middle;
border:1px solid black;
}
.column_izq .icono
{
width: 100%;
text-align: center;
border:1px solid red;
}
.column_center
{
width: 100%;
min-width:60px;
text-align:center;
display: table-cell;
vertical-align: middle;
border:1px solid black;
}
.column_der
{
width:60px;
height:100%;
display: table-cell;
white-space: nowrap;
vertical-align: middle;
border:1px solid black;
}
.column_der .logo
{
width: 100%;
text-align: center;
border:1px solid red;
}