I have two areas, left menu pane and right content pane. CSS code for both left and right are as below
/*-----------------navi_left area-----------------------*/
layoutform {
clear: both;
//background-color: #e2e2e2;
font-size: 1em;
height: 100%;
}
.div_navi {
border:1px solid #CCCCCC;
width:216px;
height: inherit;
float: left;
}
/*------------------Contents area--------------------*/
.div_text{
border:1px solid #CCCCCC;
vertical-align:top;
width:761px;
height: 100%;
//padding:0px 0px 0px 34px;
font-size:11px;
line-height:22px;
float: right;
}
The problem is that, on some pages the right pane has more height due to more content. I want to make such that if the right page gets more height, left should inherit height from it. Below picture shows that both are unequal. I am developing application in asp.net MVC4 and _layout.cshtml is
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - Fleets Go Green DataServer</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="#Url.Content("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css")" rel="Stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.15.min.js")" type="text/javascript"></script>
</head>
<!-- New Script Added -->
<script type="text/javascript" src="#Url.Content("~/Scripts/myFile.js")" ></script>
<body>
<div class="content-wrapper">
<header>
<div class="content-wrapper">
<div class="div_line">
<div class="div_grey"></div>
<div class="div_blue"></div>
</div>
<div class="empty"></div>
<div class="div_logo">
<div class="div_left_logo">
<img src="~/Images/fgg_logo.gif" >
</div>
<div class="div_right_logo">
<img src="~/Images/fgg_head.gif" >
</div>
</div>
<div class="empty"></div>
<div class="div_line">
<div class="div_grey"></div>
<div class="div_blue">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
</div>
</div>
<div class="empty"></div>
<!--
<div class="float-left">
<p class="site-title">#Html.ActionLink("Fleets Go Green Get Your Measurement", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Fahrzeuge", "Index", "Fahrzeuge")</li>
<li>#Html.ActionLink("Impressum", "About", "Home")</li>
<li>#Html.ActionLink("Kontakt", "Contact", "Home")</li>
</ul>
</nav>
</div>-->
</div>
</header>
<!-- Body Layot-->
<layoutform>
<div class="div_content">
<div class="div_navi">
<div class="navi_empty"> </div>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Fahrzeuge", "Index", "Fahrzeuge")</li>
#if (User.Identity.IsAuthenticated)
{
<ul id="submenu">
<li>#Html.ActionLink("Smart Fortwo ED", "SmartFrortED", "Fahrzeuge")</li>
<li>#Html.ActionLink("Citroën C-Zero", "CitroenCZero", "Fahrzeuge")</li>
<li>#Html.ActionLink("miAmore", "Miamore", "Fahrzeuge")</li>
<li>#Html.ActionLink("VW Golf Blue e-Motion", "VWGolfBlueEMoon", "Fahrzeuge")</li>
<li>#Html.ActionLink("VW e-up!", "VWeup", "Fahrzeuge")</li>
<li>#Html.ActionLink("VW Elektro-Caddy", "VWElectroCaddy", "Fahrzeuge")</li>
</ul>
}
<li>#Html.ActionLink("Impressum", "About", "Home")</li>
<li>#Html.ActionLink("Kontakt", "Contact", "Home")</li>
#if (User.Identity.IsAuthenticated)
{
<li>#Html.ActionLink("Passwort ändern", "ChangePassword", "SGAccount")</li>
}
#if (User.IsInRole("Administrator"))
{
<li>#Html.ActionLink("Security Guard", "Index", "Dashboard", new { area = "SecurityGuard" }, null)</li>
}
</ul>
<div class="div_bottom_logo">
<img src="~/Images/995_bmu_logo_vmxk9d.png" >
</div>
</div>
<div class="div_text">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
</div>
<div class="empty"></div>
</layoutform>
<footer>
<div class="content-wrapper">
<div class="div_line">
<div class="div_grey"></div>
<div class="div_blue">© #DateTime.Now.Year - Niedersächsisches Forschungszentrum Fahrzeugtechnik (NFF) | IFAM Bremen |
</div>
</div>
<div class="empty"></div>
<!-- <div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - imc Meßsysteme GmbH Berlin +49 (0)30 467090-0 - Frankfurt +49 (0)6172 59672-0 - Schweiz +41 (0)52 7221455 - Österreich +49 (0)6172-59672-0</p>
</div>-->
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/themes/base/css")
#RenderSection("scripts", required: false)
</div>
</body>
myFile.js looks like this
var heightright = $('.rightcontent').height();
$('.leftcontent').css('height', heightright);
alert('JS working');
I'll throw out an idea using JS - FIDDLE.
Looking around a bit, apparently it's very difficult to do what you want with CSS without some fancy and less than optimal code (absolute positioning, etc)
References:
Floated div 100% height of parent inline-block div
Floated div 100% height of dynamic parent without absolute position?
How to make a floated div 100% height of its parent?
http://css-tricks.com/forums/topic/div-child-needs-to-have-height-of-100-of-div-parent/
JS
var heightright = $('.rightcontent').height();
$('.leftcontent').css('height', heightright);
You could call the js on pageload or on .change of the height of the right div.
Best of luck.
Try this CSS:
<style type="text/css">
/*-----------------navi_left area-----------------------*/
layoutform {
clear: both;
//background-color: #e2e2e2;
font-size: 1em;
height: 100%;
background:#0066FF;
}
.div_navi {
border:1px solid #CCCCCC;
width:216px;
display:block;
position:relative;
float: left;
height:100%;
}
/*------------------Contents area--------------------*/
.div_text{
border:1px solid #CCCCCC;
vertical-align:top;
width:761px;
//padding:0px 0px 0px 34px;
font-size:11px;
line-height:22px;
display:block;
position:relative;
float: right;
height:100%;
}
</style>
Related
The footer of the main page appears just below the autogenerated menu bar at the top of the page and interferes with the div in my main page. It doesn't happen in the other pages which tips me off that something is wrong in the main page but I can't see what that is. Also, when I zoom out the content seems to veer off to the right and I don't know why.
I have given ample bottom margin to the footer and I can see the flex container div doesn't reach all the way to the bottom.
Index.cshtml
<head>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
}
#myMap {
width: 30vw;
height: 30vh;
}
.flex-container {
margin: auto;
position: fixed;
display: flex;
padding-top: 10px;
width: 80vw;
margin-bottom: -115px;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
width: 49%;
max-width: 49%;
}
.flex-child:first-child {
margin-right: 20px;
width: 49%;
width: auto;
height: auto;
max-width: 49%;
}
</style>
<!--<script src="~/lib/jquery/dist/jquery.min.js"></script>-->
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?callback=LoadMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js" defer></script>
</head>
<div class="flex-container">
<div class="flex-child left">
<h2>Bing Maps integration in ASP.NET</h2>
<h4>Select sector:</h4>
<select id="mapMenu" multiple="multiple" style="width:300px">
<option value="0">Building</option>
<option value="1">Machine</option>
<option value="2">Grid</option>
<option value="3">IT</option>
<option value="4">Power</option>
<option value="5">Platform</option>
</select>
<div id="myMap"></div>
</div>
<div class="flex-child right">
<div id="infoPane"></div>
</div>
</div>
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - ®</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("My Tool", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Data Entry", "DataEntry", "Home")</li>
<li>#Html.ActionLink("View Entries", "ViewEntries", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer style="position:relative; height: 50px; width: 100%;">
<p>© #DateTime.Now.Year - Schneider Electric®</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
I added the footer style tags but they did not help. Any ideas?
Apparently, my hunch was confirmed and the styling of the Layout and Index are interfering.
The solution I found is to replace the footer in Layout with a section using RenderSection("Footer", false) and then generate it the section in every page separately by doing:
At bottom of Index.cshtml:
...
#section Footer
{
<footer>...</footer>
}
For more info and an example on using RenderSection():
Here
I can't get the .center class to apply to the following HTML. It gets applied to the ul element for some reason, but nothing else. Am I applying it wrong? Does it have something to do with IDs? I thought adding a class to a div would apply it to all elements within.
.center {
text-align: center;
}
ul {
list-style: none; /* getting rid of bullet pts */
padding: 0; /* practice to remove padding so we can set it later */
}
img {
display: inline;
width: 200px; /* we set in % or vh(view height) for responsive */
height: 100px; /* design - changes with page size (phones tablets etc) */
}
#footer {
width: 100%;
border-top: solid 2px black;
background-color: white;
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title' class='center'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset'>Reset</button>
<button id='hint'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center'>
<div>
<div class=''>
<img src='fa-logo#2x.png' alt="image">
</div>
<div class=''>
<h4>Project by Ravish Rawal</h4>
</div>
<div class=''>
<img src='grace_hopper_academy.png' alt="image">
</div>
</div>
</div>
</body>
</html>
So I'm new to html and css, and right now I'm trying to figure out how to fix the positioning on this page.
It normally looks like the first image in the album:
http://imgur.com/a/LHbRp
But for some reason there is this white-space to the left which can be scrolled to if, overflow-x is not "hidden" like the second picture of that album.
Also, I don't know if you people go on facebook or other websites (like this one even), but when you resize a page, the elements on the page don't start just jumping around, but if I have overflow-x: hidden; then I assume they elements have to jump around, and the text will start to wrap, like third picture in the album.
So how do I go about making the page not move around when the window is resized, and as a bonus, what is that whitespace?
-Chris
EDIT (some code):
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="shift.css">
</head>
<body>
<div id="wrapper">
<!-- Navbar stuff -->
<div class="nav">
<div class="container">
<ul class = "pull-left">
<li>Logo</li>
<li>Browse</li>
</ul>
<ul class = "pull-right">
<li>Sign Up/Login</li>
<li>Help</li>
</ul>
</div>
</div>
<!-- Main swipey thing -->
<div class ="jumbotron">
<div class ="container">
<h1>Blah blah blah</h1>
</div>
</div>
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="container">
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="container">
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="container">
<ul class="pull-right">
<li>Contact</li>
<li>About Us</li>
<li>Bug Tracking</li>
</ul>
</div>
</div>
</body>
And the css:
/*! Other stuff */
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
/*! Navbar css */
.nav {
background-color: #DEB087;
border-bottom: 1px solid #DEB087;
}
.nav a {
color: #875D4B;
font-size: 15px;
font-weight: bold;
padding: 14px 10px;
}
.nav li {
display: inline;
}
/*! jumbotron */
.jumbotron {
background-image:url('http://goo.gl/04j7Nn');
height: 500px;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #DEB087;
font-size: 40px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
/*! Buy/Sell */
.portals {
background-color: #f7f7f7;
padding: 14px 10px;
border-bottom: 1px solid #dbdbdb;
float:none;
}
.buy-portal h3 {
font-size:20px;
}
.sell-portal h3 {
font-size:20px;
}
/*! Footer */
.footer {
background-color: #49484C;
}
.footer a {
color: #E8E5F2;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
}
.footer ul {
list-style-type: none;
}
please rename class container on your script HTML.
Before:
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="container"> <!--Rename "container" with another name -->
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="container"> <!--Rename "container" with another name -->
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
After:
<!-- Buy/Sell -->
<div class="portals">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="buy-portal">
<div class="content"> <!-- "container" replace with "content" -->
<h3>Need school?</h3>
<img src="http://goo.gl/an2HXY">
</div>
</div>
</div>
<div class="col-md-6">
<div class="sell-portal">
<div class="content"> <!-- "container" replace with "content" -->
<h3>Sell old</h3>
<img src="http://goo.gl/0sX3jq">
</div>
</div>
</div>
</div>
</div>
</div>
and I also changed a little in class "jumbotron" you, hails like this:
.jumbotron {
background: url ("http://goo.gl/04j7Nn") no-repeat scroll center center / cover RGBA (0, 0, 0, 0);
height: 500px;
text-align: center;
}
Result : Here on jsfiddle
Hope that helps.
I'm learning Zurb Foundation, so this is my first web site attempt. I have a problem with the Stick Top Bar. It "kind of" works, but it does some strange things when collapsed (all my items collapse into the button menu == small screen/window).
The problem is that if I go to the bottom of the page and I click on the "Menu" button on the top bar (on a small screen/window), the page goes to the top. My english is not the best, so I'll live this preview of the webpage so you can check it out:
http://okgo.comuv.com/
Steps to reproduce:
1) Resize your browser window until the topbar becomes collapsed (mobile version of the topbar).
2) Scroll down to the bottom.
3) Click "menu".
I've tried removing almost everything on the page, but the problem still persists.
Here's the code so you can take a look at it:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Beyond The Sky</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/custom.modernizr.js"></script>
<style type="text/css">
body, html {
height: 100%;
width: 100%
}
#homepage {
background-color: black;
background-attachment: scroll;
background-image: url(img/nasabackground.jpg);
background-position: center center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
#content {
background-color: black;
background-attachment: fixed;
background-image: url(img/stars.jpg);
background-position: center center;
background-repeat: repeat;
}
#homepagecontentwrapper {
height: 100%;
width: 100%;
overflow: hidden;
display: table;
}
#maintitlewrapper {
display: table-cell;
vertical-align: middle;
}
#maintitle {
color: black;
font-family: Verdana, sans-serif;
}
.centertext {
text-align: center;
}
</style>
</head>
<body>
<div id="homepage">
<div id="homepagecontentwrapper">
<div id="maintitlewrapper">
<div class="row">
<div class="small-12 columns">
<h1 id="maintitle">Hello There!<br/>This is a great site. Don't you think?</h1>
</div>
</div>
<div class="row">
<div class="large-2 small-6 columns centertext">
Contacto
</div>
<div class="large-2 small-6 columns centertext">
Nosotros
</div>
<div class="large-8 hide-for-small columns">
</div>
</div>
</div>
</div>
</div>
<div class="contain-to-grid sticky">
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Beyond The Sky</h1></li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="active">Main Item 1</li>
<li class="divider"></li>
<li>Main Item 2</li>
<li class="divider"></li>
</ul>
</section>
</nav>
</div>
<!--Content Placeholder-->
<div id="content">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<!--End of Content Placeholder-->
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.alerts.js"></script>
<script src="js/foundation/foundation.clearing.js"></script>
<script src="js/foundation/foundation.cookie.js"></script>
<script src="js/foundation/foundation.dropdown.js"></script>
<script src="js/foundation/foundation.forms.js"></script>
<script src="js/foundation/foundation.joyride.js"></script>
<script src="js/foundation/foundation.magellan.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script src="js/foundation/foundation.placeholder.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script src="js/foundation/foundation.section.js"></script>
<script src="js/foundation/foundation.tooltips.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I made this website (http://aghicks.co.uk/) using Dreamweaver and tables and I'm now learning Bootstrap. I have a few things I can't quite sort out.
So far I have this
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/stylesheet.css" rel"stylesheet" type="text/css">
<style type="text/css">
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
max-width: 1000px;
border: 1px solid black;
background:#EAEAEA;
margin: auto;
padding-top: 66px;
}
.redtext {
color: #b83535;
}
a {
color: #333;
}
a:hover {
color: #b83535;
text-decoration: none;
}
.align_right {
text-align: right;
}
.logo {
min-width: 286px;
}
span {
font-weight: 300;
}
.navbar {
padding-top: 34px;
}
.centered {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
h4 {
font-size: 16px;
}
/* Homepage */
/* Footer */
.footer_wrapper {
max-height: 70px;
}
.footer {
background-color: #999999;
}
.footer_text {
color: #FFF;
font-size: 10px;
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<img src="images/Logo.png" class="logo">
</div>
<div class="span4 offset3">
<img src="images/Phone_icon.png" class="pull-left">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid">
<div class="span6">
<img src="images/Homepage/Small_one_off_jobs.png" >
</div>
<div class="span6">
<div class="row-fluid">
<div class="span12">
<h5>Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12">
<img src="images/Homepage/Map_pin.png" >
<h5 class="redtext">Northampton Based</h5>
<img src="images/Homepage/Quote.png" >
<h5 class="redtext">Free Quotes</h5>
<img src="images/Homepage/Tools.png" >
<h5 class="redtext">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" >
<h5 class="redtext">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from Ben Mildren</strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The issues I'm having can be seen is in these pictures http://imgur.com/jdSAKEk,CbbVrv7#0
(The border around the body will be removed and the styling of the navbar will be changed)
In the first image (desktop size),you'll see that the phone numbers icon doesn't line up next to the actual numbers and both the icon and the text aren't aligned with the bottom of the logo. I can achieve this by using padding, but then when you reduce the width of the browser the padding remains and causes huge gaps in the page.
Second issue in the first image is that I cannot get those icons and red text in the middle right area to appear in a 'grid' formation like on www.aghicks.co.uk is currently.
Lastly, On the second image, when the browser width is reduced the two lists down appear in line with each other when there is clearly enough space.
Any help with any of the problems would be appreciated.
How do you want to align your huge phone icon and the 2 lines of text and numbers? First on desktop and then on tablet?
Vertical aligning is a job for display: table-something; vertical-align: bottom;.
Grid formation: I'd go with a list of 4 items, items would be fixed width (50% or 49%), displayed as inline-block (or floating into a .clearfix container).
Second image and lists not side by side: well, which CSS are applied at this width? Check rules into relevant media query. Maybe they're displayed as inline-block with a width of 50%? Then there's STILL a whitespace of approx. 4px. A width of 45% would automagically solve the problem (don't forget to add a .clearfix container otherwise content would spill into the remaining (10%-4px) left space...)