Positioning absolute div below relative div - css
I am trying to develop a HTML5 app for mobile.
The layout is pretty basic header,content.
Header (red rectangle),content (green rectangle) are absolute divs.
The content must be scrollable if the height is bigger than the screen.
My problem begin when I'am trying to have the scrollbar on the orange rectangle div only (and not on orange and blue rectangle).
The orange rectangle div must begin at the end of the blue rectangle div and end at the end of the screen. The height of blue rectangle div is unknow and can change.
Actually blue and orange rectangle divs are correctly placed but the scrollbar is not positionned where I want.
So if I try to move the scrollbar with absolute positionning on orange rectangle div, it's overlap the blue rectangle div, if I use relative div to wrap the orange rectangle, the height of the wrapper equal zero cause of absolute children or the div run out of window and is unscrollable.
If someone has a solution, It will be nice.
EDIT 1 :
Here is the html and css code.
html :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="lib/font-awesome/4.3.0/css/font-awesome.min.css">
<title>YAOSWA</title>
</head>
<body>
<header class="header_no_back_button" id="header" ng-controller="HeaderCtrl" ng-show="getShowHeader()">
<span class="header_icon pull-left ng-hide" ng-show="getShowBackButton()">
<a href="#home">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<span id="headertitle" class="pull-left ng-binding">
YAOSWA
</span>
<span class="header_icon pull-right" ng-show="getShowAboutButton()">
<a href="#about">
<i class="fa fa-info-circle"></i>
</a>
</span>
<span class="header_icon pull-right" ng-show="getShowSettingsButton()">
<a href="#settings">
<i class="fa fa-cog"></i>
</a>
</span>
</header>
<!-- ngView: -->
<div class="content main_content ng-scope" id="content" ng-view="" afkl-image-container="">
<div class="home_template ng-scope">
<div class="view container">
<div ng-hide="errorOverlay()">
<div class="weather_header" ng-show="currentWeather.city && currentWeather.country">
<div class="weather_header_wrapper">
<div>
<span class="current_weather_location ng-binding">New York / US</span>
</div>
<div class="separator">
<span></span>
</div>
<div class="weather_chooser">
<span class="weather_type ng-binding">Hourly Weather</span>
<span class="header_icon pull-left" ng-show="!isMinTab()">
<a ng-click="prevTab()">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<span class="header_icon pull-right" ng-show="!isMaxTab()">
<a ng-click="nextTab()">
<i class="fa fa-chevron-right"></i>
</a>
</span>
<div class="clear_both"></div>
</div>
</div>
</div>
<div class="tab_list">
<div class="tab ng-hide" ng-show="isActiveTab(0)">
....
</div>
<div class="tab" ng-show="isActiveTab(1)">
<div class="weather_data_wrapper">
<!-- ngRepeat: weather in hourlyWeather.list -->
<div class="hourly_weather weather_data weather_803 day" ng-repeat="weather in hourlyWeather.list" ng-click="toggleWeatherDetail($event)">
<div class="summary_info_hourly_weather summary_info_weather">
<div class="row row_weather">
<div class="col-xs-4">
<div>
<div class="hourly_weather_logo_wrapper">
<div afkl-lazy-image-loaded="done" class="hourly_weather_logo" afkl-lazy-image-options="{"offset": 150}" afkl-lazy-image="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=0"><img alt="" class="afkl-lazy-image" src="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=0"></div>
</div>
</div>
</div>
<div class="col-xs-4">
<div>
<span class="hourly_weather_date_day ng-binding">Fri 31</span>
<span class="hourly_weather_date ng-binding">11:00</span>
</div>
</div>
<div class="col-xs-4">
<div class="vcenter">
<div class="align-left">
<span class="hourly_weather_desc ng-binding">broken clouds</span>
<span class="hourly_weather_temp ng-binding">294.2 K</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end ngRepeat: weather in hourlyWeather.list -->
<div class="hourly_weather weather_data weather_804 day" ng-repeat="weather in hourlyWeather.list" ng-click="toggleWeatherDetail($event)">
<div class="summary_info_hourly_weather summary_info_weather">
<div class="row row_weather">
<div class="col-xs-4">
<div>
<div class="hourly_weather_logo_wrapper">
<div afkl-lazy-image-loaded="done" class="hourly_weather_logo" afkl-lazy-image-options="{"offset": 150}" afkl-lazy-image="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=1"><img alt="" class="afkl-lazy-image" src="img/weather_icon_animate/icon_weather_hard_cloud.svg?numhourly=1"></div>
</div>
</div>
</div>
<div class="col-xs-4">
<div>
<span class="hourly_weather_date_day ng-binding">Fri 31</span>
<span class="hourly_weather_date ng-binding">14:00</span>
</div>
</div>
<div class="col-xs-4">
<div class="vcenter">
<div class="align-left">
<span class="hourly_weather_desc ng-binding">overcast clouds</span>
<span class="hourly_weather_temp ng-binding">297.91 K</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end ngRepeat: weather in hourlyWeather.list -->
....
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/angular-translate.min.js"></script>
<script type="text/javascript" src="js/lazy-image.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
css :
#font-face {
font-family: 'UbuntuM'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/Ubuntu-M.ttf'); /*URL to font*/
}
#font-face {
font-family: 'UbuntuR'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/Ubuntu-R.ttf'); /*URL to font*/
}
#font-face {
font-family: 'ubuntu-light'; /*a name to be used later*/
src: url('../fonts/ubuntu-font-family/0.80/ubuntu-light.woff'); /*URL to font*/
}
* {
font-size:1em;
box-sizing: border-box;
}
*:after, *:before {
box-sizing: border-box;
}
html,body {
height:100%;
width:100%;
margin:0;
}
body {
color:#5c5c5c;
font-family: 'UbuntuR';
}
.clear_both {
clear:both;
}
.mediumfont {
font-family: 'UbuntuM';
}
header {
box-sizing: border-box;
height:60px;
line-height:45px;
text-align:center;
position: absolute;
top:0;
left:0;
right:0;
width:100%;
background-color:#ecedec;
color:#5c5c5c;
padding:5px;
border-bottom: 10px solid #d7d7d7;
}
#headertitle,
.weather_header {
font-family: 'ubuntu-light';
padding-left: 10px;
font-size:20px;
line-height:42px;
}
.header_icon > a{
font-size: 25px;
padding: 0 7px;
color: #5c5c5c;
}
#content {
box-sizing: border-box;
position: absolute;
top:60px;
bottom:0px;
left:0;
right:0;
width:100%;
background-color:#ecedec;
color:#000000;
overflow-y: auto;
padding:5px;
}
#content .tab {
overflow: hidden;
position:relative;
margin:5px;
}
#content .tab_list {
/*
position: absolute;
bottom: 0;
top: 0px;
left: 0;
right: 0;
*/
}
#content .tab,
.weather_data_wrapper {
/*position: absolute;
top: 0;
bottom: 0;
overflow-y: auto;
right: 0;
left: 0;
*/
}
/*
footer {
height:30px;
line-height:30px;
text-align:center;
position: absolute;
bottom:0;
left:0;
right:0;
width:100%;
background-color:red;
padding:5px;
}
*/
.about_logo_wrapper {
text-align: center;
margin-top:10px;
}
.about_logo_wrapper > img {
width:33%;
height:auto;
display:inline-block;
}
.about_text_wrapper {
text-align:center;
}
.about_title {
display: block;
margin: 10px;
font-size: 1.5em;
margin-bottom: 2px;
}
.about_template ul {
list-style: none;
padding:0;
}
.about_template ul li{
margin:5px;
}
.about_desc {
margin-top:35px 0px;
}
#errorOverlay,
#loadingOverlay {
background-color:rgba(255, 255, 255, 0.5);
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:100
}
.error_overlay_wrapper{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
width:100%;
height:10%;
margin-left: -50%; /*half width*/
margin-top: -5%; /*half height*/
}
.loading_overlay_wrapper{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
width:100px;
height:100px;
margin-left: -50px; /*half width*/
margin-top: -50px; /*half height*/
}
img {
max-width:100%;
max-height:100%;
}
/*
.hourly_weather_date_day,
.daily_weather_date_day,
.hourly_weather_desc,
.daily_weather_desc,
.detail_info_weather
*/
.hourly_weather_desc,
.daily_weather_desc {
font-size:0.75em;
}
.weather_data,
.detail_info_weather,
.summary_info_weather {
color: #FFFFFF;
}
.hourly_weather > .detail_info_weather,
.daily_weather > .detail_info_weather
{
display:none;
}
.hourly_weather.show_weather_detail > .detail_info_weather,
.daily_weather.show_weather_detail > .detail_info_weather
{
display:block;
}
.weather_data {
padding: 5px;
}
.hourly_weather.weather_data,
.daily_weather.weather_data
{
margin-bottom:5px;
}
.current_weather_desc,
.hourly_weather_desc,
.daily_weather_desc {
text-transform: capitalize;
}
.detail_temp_min_max_group {
display:inline-block;
}
.detail_icon {
height:1em;
}
.detail_icon_bkg {
background-size: 18px;
padding-left:20px;
background-repeat: no-repeat;
background-position: left center;
}
.detail_icon_sunrise_bkg {
background-image:url(/img/details_icon/icon_sunrise.svg);
}
.detail_icon_sunset_bkg {
background-image:url(/img/details_icon/icon_sunset.svg);
}
.detail_icon_temp_bkg {
background-image:url(/img/details_icon/icon_temp.svg);
}
.detail_icon_temp_min_max_bkg {
background-image:url(/img/details_icon/icon_temp_min_max.svg);
}
.detail_icon_pressure_bkg {
background-image:url(/img/details_icon/icon_pressure.svg);
}
.detail_icon_humidity_bkg {
background-image:url(/img/details_icon/icon_humidity.svg);
}
.detail_icon_cloud_bkg {
background-image:url(/img/details_icon/icon_cloud.svg);
}
.detail_icon_rain_bkg {
background-image:url(/img/details_icon/icon_rain.svg);
}
.detail_icon_wind_orientation_bkg {
background-image:url(/img/details_icon/icon_wind_orientation.svg);
}
.detail_icon_wind_speed_bkg {
background-image:url(/img/details_icon/icon_wind_speed.svg);
}
.summary_info_current_weather {
text-align:center;
}
.current_weather_logo {
width: 50%;
display:inline-block;
}
/*black*/
.weather_data.weather_200,
.weather_data.weather_201,
.weather_data.weather_202,
.weather_data.weather_210,
.weather_data.weather_211,
.weather_data.weather_212,
.weather_data.weather_221,
.weather_data.weather_230,
.weather_data.weather_231,
.weather_data.weather_232,
.weather_data.weather_900,
.weather_data.weather_901,
.weather_data.weather_902,
.weather_data.weather_903,
.weather_data.weather_904,
.weather_data.weather_905,
.weather_data.weather_906,
.weather_data.weather_950,
.weather_data.weather_951,
.weather_data.weather_952,
.weather_data.weather_953,
.weather_data.weather_954,
.weather_data.weather_955,
.weather_data.weather_956,
.weather_data.weather_957,
.weather_data.weather_958,
.weather_data.weather_959,
.weather_data.weather_960,
.weather_data.weather_961,
.weather_data.weather_962
{
background-color:#000000;
}
/*blue*/
.weather_data.weather_300,
.weather_data.weather_301,
.weather_data.weather_302,
.weather_data.weather_310,
.weather_data.weather_311,
.weather_data.weather_312,
.weather_data.weather_321,
.weather_data.weather_500,
.weather_data.weather_501,
.weather_data.weather_502,
.weather_data.weather_503,
.weather_data.weather_504,
.weather_data.weather_511,
.weather_data.weather_520,
.weather_data.weather_521,
.weather_data.weather_522,
.weather_data.weather_531,
.weather_data.weather_600,
.weather_data.weather_601,
.weather_data.weather_602,
.weather_data.weather_611,
.weather_data.weather_621
{
background-color:#55AAFF;
}
/*gray*/
.weather_data.weather_701,
.weather_data.weather_711,
.weather_data.weather_721,
.weather_data.weather_731,
.weather_data.weather_741,
.weather_data.weather_751,
.weather_data.weather_761,
.weather_data.weather_762,
.weather_data.weather_771,
.weather_data.weather_781,
.weather_data.weather_802,
.weather_data.weather_803,
.weather_data.weather_804
{
background-color:#808080;
}
/*yellow*/
.weather_data.weather_800,
.weather_data.weather_801
{
background-color:#E0B000;
}
/*night*/
.weather_data.night {
background-color:#41403b;
}
.daily_weather_logo,
.hourly_weather_logo {
width: 100px;
display:inline-block;
}
.weather_header {
padding:0px;
position: relative;
}
.weather_header_wrapper {
margin:5px;
background-color:#d7d7d7;
}
.weather_header_wrapper > div {
text-align:center;
}
.row_weather > div {
text-align:center;
}
.row_weather {
display: table;
width:100%;
table-layout: fixed;
}
.row_weather > div span {
display: inline-block;
width:100%;
}
.row_weather [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
}
.align-left {
text-align:left;
}
.weather_data .separator
{
margin-top: 10px;
padding-bottom: 10px;
}
.separator {
text-align:center;
line-height: 1px;
height: 1px;
position: relative;
background-color:transparent;
}
.separator > span {
display: inline-block;
border-top: 1px solid #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 10%;
left: 10%;
}
.weather_type {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.weather_chooser {
position:relative;
}
.container-centered {
height: 100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container-centered:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.elem-centered {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
I don't find a correct answer with html and css.
But javascript do the job. Just need to calculate the height of the header and add a "top" to the absolute div.
Related
How to make 3 columns with the right column having two sections
So essentially I am writing a game in javascript. I have a canvas on the left, a canvas in the middle, a textarea topright, and a canvas bottom right. But I can't seem to get the right CSS code to figure out this layout like the picture. I want the middle to take up about 50-60% of the middle of the page, and the left and right columns taking the rest of the space. Would be nice if it auto resized with browser window. Any help would be appreciated.
Set a container to hold all the elements and then make smaller containers inside. Target each with CSS and set its properties.
Here I set a general CSS class .generalStyles just to simplify the code.
You would use something like this: (run the snippet)
.generalStyles
{
position:relative;
float:left;
background-color:#000;
border-radius:4px;
box-sizing:border-box;
color:#f00;
height:100px;
padding:5px;
text-align:center;
}
.container
{
width:100%;
background-color:#FFF;
}
.leftPanel
{
width:24%;
margin:0 1% 0 0;
}
.rightPanel
{
width:24%;
margin:0 0 0 1%;
background-color:#FFF;
padding:0;
}
.middlePanel
{
width:50%;
margin:0;
}
.topPanel
{
width:100%;
margin:0;
height:49.5%;
}
.bottomPanel
{
width:100%;
margin:1% 0 0 0;
height:49.5%;
}
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="container generalStyles">
<div class="leftPanel generalStyles">left stuff goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="middlePanel generalStyles">middle goes here<br/>and more here<br/>and more here<br/>and more here</div>
<div class="rightPanel generalStyles">
<div class="topPanel generalStyles">top stuff<br/>and more here</div>
<div class="bottomPanel generalStyles">bottom stuff<br/>and more here</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h2 {
text-align:center;
font-family:arial;
color:red;
font-weight:normal;
}
.left {
background-color: #000;
border-radius:10px;
float: left;
width: 20%;
padding: 10px;
margin:10px;
height: 300px;
}
.middle {
background-color: #000;
border-radius:10px;
float: left;
width: 60%;
padding: 10px;
margin:10px;
height: 300px;
}
.right {
float: left;
width: 20%;
margin: 10px;
height: 300px;
position: relative;
top: 0;
}
.top {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
}
.bottom {
background-color: #000;
border-radius:10px;
width: 100%;
height: 47%;
padding: 10px;
position: absolute;
bottom: 0;
right: 0;
}
.row {
box-sizing:border-box;
display: flex;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="left">
<h2>left</h2>
</div>
<div class="middle">
<h2>middle</h2>
</div>
<div class="right">
<div class="top">
<h2>top right</h2>
</div>
<div class="bottom">
<h2>bottom right</h2>
</div>
</div>
</div>
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right">
<div class="rightDiv"></div>
<div class="rightDiv"></div>
</div>
</div
and css
.container{display:block;width:100%}.left,.middle,.right{width:100px;display:inline-block}.left{border:1px solid red;height:100px}.middle{border:1px solid green;height:100px}.rightDiv{border:1px solid #ff0;height:40px;margin:10px 0}
Fiddle
Parent overflow hidden with absolute children
Scenario: I need a container with relative positioning, which has 2 absolute positioned children. On clicking the container both children will be transitioned on transform property, one being moved to the left and one being moved to the right, both outside the window, so I need somehow to set overflow: hidden on the parent, in order not to show the transitioned elements outside of parent container.
The thing is parent does not have a height set because of the absolute children, and when I use overflow-x: hidden on it, nothing is showed anymore.
Is it possible to set an overflow so that when children gets transformed to left/right no scrollbar will be showed? I do not want to set overflow on the body element. I'm looking for CSS-only solutions, if there are any.
Also setting a fixed height for parent is not a solution to my problem, please take that into consideration.
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>FullScreen-Split | Experimental</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="box-container">
<div class="box clearfix">
<div class="half-left">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
<div class="half-right">
<div class="split">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
And here is my SASS code
.box {
width: 100%;
position: relative;
&.active {
.half-left {
transform: translateX(-150%);
}
.half-right {
transform: translateX(150%);
}
}
.half-left,
.half-right {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
position: absolute;
overflow: hidden;
color: #fff;
}
.half-left {
top: 0;
left: 0;
> .split {
width: 200%;
}
}
.half-right {
top: 0;
left: 50%;
> .split {
margin-left: -50%;
}
}
.split {
width: 100%;
height: 100%;
}
.details {
text-align: center;
> i.fa {
font-size: 62px;
margin-bottom: 40px;
}
> h3 {
font-size: 32px;
font-weight: bold;
}
}
}
.clearfix {
clear: both;
&::before,
&::after {
content: '';
display: table;
clear: both;
}
}
html and body elements are set to width: 100% and `height: 100%;
I suggest to not use position: absolute or float, as neither is meant for general layout.
They both take their element out flow (in somewhat different ways though), and make it more difficult to create a responsive page.
You could simplify the code a little and use display: inline-block, like this
.box {
width: 100%;
}
.box .half {
display: inline-block;
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div><!-- this comment remove the white space between the inline-block elements
--><div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
Or use flexbox, which today is the recommended way to do layout
.box {
width: 100%;
display: flex;
}
.box .half {
width: 50%;
padding: 25px 0;
transition: 2s transform ease-out;
background-color: #3a3a3a;
overflow: hidden;
color: #fff;
}
.box .details {
text-align: center;
}
.box .details > i.fa {
font-size: 62px;
margin-bottom: 40px;
}
.box .details > h3 {
font-size: 32px;
font-weight: bold;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="box-container">
<div class="box">
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
<div class="half">
<div class="details">
<i class="fa fa-automobile"></i>
<h3>Porsche Dealer Auto</h3>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.js"></script>
Inside of positioning half-left and half-right as absolute, you could just float them both left and add overflow: hidden to the parent container.
.half-left, half-right {
float: left;
}
.box {
position: relaitve;
overflow: hidden;
}
Then when you add active to the parent container, the two children should transform as you intended.
Here's a Codepen to demonstrate : - https://codepen.io/aphextwix/pen/KmmgXJ
Add top padding to font awesome icons
I'm trying to add some top padding only to the font awesome icon, but if I set padding-top:10px or margin-top:10px to the i element, it also adds padding to the text before it.
Can someone help?
jsFiddle
i {
font-size: 30px;
padding-top: 10px;
}
.block {
background-color: #ccc;
padding: 10px;
max-width: 400px;
text-align: center;
}
.block-number {
background-color: #000;
color: #fff;
padding: 10px;
display: inline-block;
font-size: 20px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="block">
<div class="block-number">2 to 4</div>
<i class="fa fa-large fa-camera-retro"></i>
</div>
Since both of .block-number and font awesome <i> elements are set to inline block, so vertical-align will take effects, you can change the default value from baseline to top etc.
.block-number, i {
...
vertical-align: top;
}
i {
...
padding-top: 10px;
}
There is another way by using position and top to adjust <i> element individually.
i {
position: relative;
top: 10px;
}
I'm not sure if it's possible to do it with other method, but what I would do in your case is positioning the icon absolutely.
i {
font-size:30px;
position: absolute;
padding-top: 8px;
padding-left: 10px;
}
.block {
background-color:#f1f1f1;
padding:10px;
max-width:400px;
text-align:center;
position: relative;
}
.block-number {
background-color:#000;
color:#fff;
padding:10px;
display:inline-block;
font-size:20px;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="block">
<div class="block-number">
2 to 4
</div>
<i class="fa fa-large fa-camera-retro"></i>
</div>
I didn't get your answer yet, but if you just want to center the text and icon vertically, use following code:
i {
font-size:30px;
}
.block {
background-color:#f1f1f1;
padding:10px;
max-width:400px;
text-align:center;
}
.block-number {
background-color:#000;
color:#fff;
padding:10px;
display:inline-block;
font-size:20px;
}
.block > * {
vertical-align: middle;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="block">
<div class="block-number">
2 to 4
</div>
<i class="fa fa-large fa-camera-retro"></i>
</div>
How to center divs inside another div with position:absolute?
#logo {
position: absolute;
width:100%;
height:100%;
text-align: center;
}
#logo-img img {
float:left;
height: 4.3vw;
}
#logo-text {
float:left;
font-size:2vw;
}
<div id="logo">
<div id="logo-img">
<img src="http://revistasindromes.com/images/100x100.gif" />
</div>
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
I've tried adding left:50%;right:50% but it doesn't align it horizontally right in the middle. What is the right way to horizontally align divs in my situation?
JSFiddle: http://jsfiddle.net/8s0q9cyq/
I improved Praveen's answer: https://jsfiddle.net/9mpgdqzf/
Dont use a div with an ID only to give style to an IMG. The Img can have the ID and and inherit all the attributes directly into it and your HTML becomes cleaner and lighter ;)
<div id="logo">
<img id="logo-img" src="http://revistasindromes.com/images/100x100.gif" />
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
#logo {
position: absolute;
width:100%;
height:100%;
text-align: center;
}
#logo-img, #logo-text {
display: inline-block;
vertical-align: middle;
}
#logo-img {
height: 4.3vw;
}
#logo-text {
font-size:2vw;
}
Why not use text-align: center?
#logo {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#logo-img,
#logo-text {
display: inline-block;
vertical-align: middle;
}
#logo-img img {
display: inline-block;
height: 4.3vw;
}
#logo-text {
display: inline-block;
font-size: 2vw;
}
<div id="logo">
<div id="logo-img">
<img src="http://revistasindromes.com/images/100x100.gif" />
</div>
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
#logo {
position: absolute;
width:100%;
height:100%;
text-align: center;
}
#logo-img {
display:inline-block;
}
#logo-img img {
height: 4.3vw;
}
#logo-text {
display:inline-block;
font-size:2vw;
}
<div id="logo">
<div id="logo-img">
<img src="http://revistasindromes.com/images/100x100.gif" />
</div>
<div id="logo-text">Lorem Ispum Dolores</div>
</div>
Positioning problems with internet explorer (basic CSS)
I'm attempting to create a website like this http://www.spookycraft.net/ and whenever I run my site in IE it looks terrible everything is pushed to the left and all of the images are separated, Tho in Chrome and firefox they look perfect (as in all centered and the transition is there) here's the fiddle
http://jsfiddle.net/EuRJE/
Here's the testing site: http://www.wandernetwork.com/
and here's the code:
also keep in mind i'm somewhat novice so if you have any pointers for me or additional tips they would be greatly appreciated.
<head>
<meta charset='UTF-8'>
<title>Wandercraft Network</title>
<style media="screen" type="text/css">
#page-wrap {
width:620px;
margin:0px auto;
}
.slide-up-boxes a {
display:block;
width:300px;
height:300px;
background: #eee;
overflow:hidden;
}
.slide-up-boxes h5 {
height:300px;
width:300px;
text-align:center;
line-height:150px;
-webkit-transition: margin-top 0.3s linear;
background-color:#white;
}
.slide-up-boxes a:hover h5 {
margin-top:-300px;
}
.slide-up-boxes div {
text-align:center;
height:300px;
width:300px;
opacity:0;
background-color:orange;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.2s linear;
}
.slide-up-boxes a:hover div {
-webkit-transform: rotate(0);
opacity:1;
}
.slide-up-boxes {
margin:5px;
width:300px;
float:left;
}
.banner {
margin:0px auto;
display:block;
padding:15px;
width:1000px;
height:300px;
}
/* Limit the width of the tray to 30px to make it stack vertically*/
#enjin-tray {
max-width: 30px;
margin: 0;
bottom: 175px;
}
#enjin-tray li#notificationpanel {
border-radius: 3px;
}
#enjin-tray ul li.tray-item {
border-style: solid;
border-width: 1px;
}
#notificationpanel .notification-icon.apps {
background-position: -84px 3px;
}
#notificationpanel .notification-icon.general {
background-position: -54px 3px;
}
#notificationpanel .notification-icon.messages {
background-position: -25px 3px;
}
#notificationpanel .notification-icon.dashboard {
display: none;
}
#enjin-tray li#notificationpanel .subpanel {
width: 380px;
bottom: 0;
}
#enjin-tray #notificationpanel .subpanel.general {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.messages {
right: 40px;
}
#enjin-tray .subpanel {
right: 40px;
}
#enjin-tray #notificationpanel .subpanel.apps .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.general .faux-icon {
display: none;
}
#enjin-tray #notificationpanel .subpanel.messages .faux-icon {
display: none;
}
#messages-notification-tip {
bottom: 231px !important;
right: 35px !important;
}
#general-notification-tip {
bottom: 205px !important;
right: 35px !important;
}
#apps-notification-tip {
bottom: 180px !important;
right: 35px !important;
}
.triangle {
display: none;
}
#enjin-tray-messaging {
display: none;
}
</style>
</head>
<body>
<img src="https://dl.dropboxusercontent.com/u/85261154/WN_Banner.png" border="0px" class="banner">
<div id="page-wrap">
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/PVP.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Kingdoms.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Survival.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<section class="slide-up-boxes"> <a href="www.reddit.com">
<img src="https://dl.dropboxusercontent.com/u/85261154/Factions.png">
<div>
<h5> <img src="http://www.backbonetechnology.com/media/blog-html5-logo.png"> </h5>
</div>
</a>
</section>
<div style="clear:both;"></div>
</div>
</body>
Any help would be appreciated if I find the answer I'll be sure to update this post, Thank you for reading.
What version of IE are you using? Your page looks fine on IE10. I can't help you if you are running an older version, but have a look at this : Imitate CSS3 transition in IE? -webkit-transition won't work on IE.