I’m currently working on a demo site and having some problems getting the “enquire” and “social” boxes on the following page to close up and have a neat margin between them (left to right). I’ve tried setting widths but that then messes up the padding which is nicely surrounding my text and icons.
There is a “maintop” div which did have a 80% width and was floated right but even reducing this width doesn’t get rid of the huge gap and instead pushes the “social” div down and wraps it around, so I’ve now removed the width altogether for the moment.
Thanks very much for your help. I’ve managed to fix it using a bit of inspiration from your code and a fresh look at it today :). One thing I have done is put a set width on the social div and set margin-right on the enquire div to keep everything nicely spaced out. I’ve also cut out the main top since it wasn’t really doing anything.
The main problem I was having using your suggestion of the CSS and HTML changes was that there was still a large gap between the two divs, hence the rethink which you can see at http://andrewcourtney.co.uk/demoenvironment/lioninn/. I have had to annoyingly juggle the position of the two divs within the code so that enquire and social appear left and right respectively but are last and first respectively in the code…any suggestions on how I can fix that?
Also please excuse the styles, they’re only temporary
Thanks for chiming in EricWatson, most helpful to see a site on a different screen size. It has, however, made me question how I can best adjust the navigation to be responsive so that it stays within it’s container rather than wrapping around. Any suggestions? I’ve also noticed that if you were to view the site on a lower resolution, the enquire div is obscured slightly by the logo. It would be nice if the logo forced the enquire div to wrap around rather than get hidden but applying a height to the logo doesn’t seem to force it down :S
Shoxt3r, how’s the Lion’s Inn project coming along? It’s an attractive design. Do you have a screen shot or image that shows exactly what you want it to look like and how you would like it to behave? I’m unclear about some of the borders in particular. Are you intending this to be a fluid design or responsive? I’d like to give the menu and the sliding boxes a go, if you have not already found a suitable solution.
I haven’t done any more on it as yet due to other commitments but the designs are in place. I’d rather keep the designs underwraps for the moment as I’m still experimenting a little with the layout and just want to block out a couple of the more challenging elements just to see what it turned out like. Essentially it doesn’t have anything much out of the ordinary; mix of two-column and three-column layouts underneath the “header” area you see already
The borders are purely to give it a “rustic” look about it (typical of many English pubs and their wood panel interiors!) and thought I’d experiment with some fancy borders - thanks to guidance from those on here I’ve managed to do just that. As responsive seems to be the way to go I’m developing it as a site to suit various screen sizes and devices, though obviously I’ve still got quite a bit of work to do such as media queries etc. This is just the starting point if you will
I’ve managed to figure out the positioning of the boxes which slide the way I want them to when the window is reduced in width but haven’t as yet figured out how to fix the problem of the navigation wrapping or the boxes disappearing beneath the logo. Ideally I’d like the boxes to stop just short of the logo before they get covered but unsure if that would be possible to build in? I suppose one easy solution would be the scrap the logo overlapping the design but I like a challenge!
I’ve been having fun with your page. The subtleties in your design have a nice, old world look. I was never able to find a way to satisfactorily present the social and enquire boxes side-by-side, so I tried something different which turned out surprisingly well, but didn’t match your objectives. Nevertheless, I’ve enjoyed the exercise and would be grateful if you would post a link to the site when it goes live. It’s always fun to see how products work out.
Well this is a long-overdue update and to be honest not much of one since I’m stuck again! Basically I’ve now got the problem of making it responsive but instead of the centre column collapsing the text so that the right column stays where it is, it wraps the right-hand column around underneath when you resize the window even a tiny bit…urgh!
You’ve made some advancements to your page. Looks nice.
Yes, the use of percent widths is causing some problems, but that can be worked out.
You’ve mentioned a responsive layout, but so far there are no media queries being invoked so we’re still looking at a fluid layout. Your new additions practically beg for a responsive layout, though, so you’re on the right track.
When one designs for a small device, the “fluffy” stuff like unnecessary or large images are often dropped along with unnecessary text to save bandwidth and reduce scrolling. Could you identify those parts of the new page that are the most important (the part that a user should see first) and the part(s) that are less important (stuff that could come last or be eliminated from small devices)?
When I look at the content on your page I see the following:
(1) Images on the left that impart a nice, warm feeling about the inn but give no readable information.
(2) A Lot of text in the middle. Probably more than someone might want to read if just casually browsing (probably just temporary filler).
(3) Images on the right with text that informs and links that go to useful targets; however, the size of that text is uncomfortably small and some or most users would have to zoom larger to read it. I would find that annoying.
At this time, the images on the left do not resize; the ones on the right do; the text in the middle adapts to the width of its column.
How do you anticipate the content being arranged for small devices?
In the following recent message, a member asked about Fluid Layouts and Best Practices. The link is to @Paul_O_B’s excellent response in which he provides several resources.
All good reading.
PART 2.
This code is a month after-the-fact may be probably useless, but I am going to include the FLUID layout that I put together last month when I was playing because I think there may be a couple of items in it that may still be useful. You can always ignore it :). The only images used are one of the old twitter images and the logo.
Highlights:
(1) The shadow around the main menu bar is symmetrical.
(2) The tilde (~) is applied via an :after pseudo-class; however, code is included to apply it within <span> taqs in the HTML as well. Either method is valid. Placing it outside of the <li> tags is not.
(3) The page is fluid down to 203px. Nothing overflows any border before that point.
(4) The boxes for the social buttons and the booking phone number have been rearranged to improve the flow of the layout. Social buttons are at the bottom. (That’s why I didn’t post it before.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
http://www.sitepoint.com/forums/showthread.php?991682-How-to-align-and-reduce-gaps-between-boxes
Thread: How to align and reduce gaps between boxes?
Mar 4, 2013 16:07
Shoxt3r
http://andrewcourtney.co.uk/demoenvironment/lioninn/
http://www.andrewcourtney.co.uk/
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="en"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title>Lion Inn (floats)</title>
<link rel="stylesheet" type="text/css" href="includes/lion1r.css"/>
<link href='http://fonts.googleapis.com/css?family=Lusitana' rel='stylesheet' type='text/css'/>
</head>
<body>
<div class="outer cf">
<div class="logo">Lion Inn</div>
<div class="menubox">
<div class="menubg">
<ul class="cf">
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Restaurant & Menus</a></li>
<li><a href="#" title="">Rooms</a></li>
<li><a href="#" title="">Gallery</a></li>
<li><a href="#" title="">Events</a></li>
<li><a href="#" title="">The Area</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
</div>
</div> <!-- .menubox -->
<div class="main cf">
<div class="enquire">To Enquire or Book Call 01234 ~ 567890</div>
<!-- ADD CONTENT BELOW THIS LINE -->
<div class="heading"><h1>Page Heading</h1></div>
<div class="content cf">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum mattis bibendum. Pellentesque ultricies risus tristique elit faucibus at hendrerit elit aliquam. Integer gravida nulla eget magna facilisis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dui ligula, ut sodales lacus. Nulla sit amet elit id mi adipiscing pulvinar. Nunc bibendum diam nunc, sit amet aliquet urna.</p>
<h2>Page Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum mattis bibendum. Pellentesque ultricies risus tristique elit faucibus at hendrerit elit aliquam. Integer gravida nulla eget magna facilisis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id dui ligula, ut sodales lacus. Nulla sit amet elit id mi adipiscing pulvinar. Nunc bibendum diam nunc, sit amet aliquet urna.</p>
</div>
<!-- ADD CONTENT ABOVE THIS LINE -->
</div> <!-- .main -->
<div class="social">Why not join us for the latest news and events? <span><img src="images/twitter.png" alt=""/><img src="images/twitter.png" alt=""/><img src="images/twitter.png" alt=""/></span></div>
<div class="footer">
<p><a href="#" title="">Home</a> | <a href="#" title="">Members</a> | <a href="#" title="">Dates</a> | <a href="#" title="">Gallery</a> | <a href="#" title="">Contact</a> | <a href="#" title="">Links</a></p>
<p>Copyright 2013 Andrew Courtney</p>
<p>Website Designed and Developed by <span class="andrewcourtney"><a href="http://www.andrewcourtney.co.uk" target="blank">andrewcourtney</a></span></p>
</div>
</div>
</body>
</html>
/* lion1r.css */
@font-face {
font-family:'Lusitana', serif;
font-weight:normal;
font-style:normal;
}
body {
font-size:13px;
font-family:Arial, Helvetica;
background-color:#3b1313;
background-image:url(../images/background.png); /* 200x200 */
background-attachment:fixed;
margin-top:10px;
}
.outer {
/* border:1px solid red; /* TEST BORDER */
width:90%;
padding:0 12px;
margin:0 auto;
}
.logo {
/* outline:1px solid #0cc; /* TEST OUTLINE */
width:165px;
height:177px;
float:left;
background-image:url(../images/logo.png); /* logo as background-image 165x177 */
background-repeat:no-repeat;
font-size:0px;
padding-right:6px;
margin-left:-15px;
}
.menubox {
/* outline:1px solid yellow; /* TEST OUTLINE */
border:2px solid #522a2a; /* border around menu bar */
padding:6px; /* space for black box shadow */
margin:44px -8px 0 0px;
}
.menubg {
border:1px solid #3b1313; /* 1px brown border around inner menu bar */
background-color:#522a2a; /* inner background-color of menu bar */
-webkit-box-shadow:0px 0px 3px 2px black;
box-shadow:0px 0px 3px 2px black; /* black shadow around menu bar */
}
.menubg ul {
/* outline:1px solid #0c0; /* TEST OUTLINE */
display:table;
list-style-type:none;
padding:12px; /* includes padding left when page is very narrow */
margin:0;
}
.menubg li {
display:block;
float:left;
color:#faa31b;
font-size:1.2em;
font-family:Lusitana;
text-transform:uppercase;
text-shadow:black 0.15em 0.15em 0.2em;
padding:4px 0; /* space above and below the list items */
margin:0;
}
/* "list" valid tilde-in-spans in the main menubar, eg: </a><span>~</span></li> */
.menubg span {
display:inline-block;
padding:0 .75em; /* space to the left and right of the tilde */
}
/* An (IE8+) ALTERNATIVE to the tilde-in-spans in the main menubar */
.menubg li:after {
content:"~";
display:inline-block;
padding:0 .75em;
}
.menubg li:last-child:after {
content:"";
padding:0;
}
/* END ALTERNATIVES */
.main {
/* outline:1px solid magenta; /* TEST OUTLINE */
border:2px solid #522a2a; /* border around main content area of page */
background-color:#3c1313; /* background-color of content area of page (overlays pattern) */
color:#faa31b; /* content text color */
margin-top:-2px; /* space between div.topcoat and top of window */
}
.heading {
padding:0 20px;
}
h1 {
/* outline:1px solid gray; /* TEST OUTLINE */
float:left;
font-weight:normal;
font-size:2.75em;
font-family:'Lusitana', serif;
margin:.4em 0 .2em;
}
.content {
/* outline:1px solid brown; /* TEST OUTLINE */
clear:both;
padding:0 20px;
margin:.4em 0;
/* overflow:hidden; /* more obvious|visible|flexible if applied as class="cf" in html ??? */
}
.enquire,
.social {
float:right;
border:2px solid #522a2a;
background-color:#522a2a;
color:#faa31b;
font-family:Lusitana;
text-transform:uppercase;
text-shadow:black 0.15em 0.15em 0.2em;
box-shadow:0 0 0 1px #3b1313 inset;
padding:4px 14px;
margin:4px;
}
.enquire {
font-size:1.2em;
}
.social {
font-size:1em;
line-height:150%;
margin:4px 0;
}
.social span {
white-space:nowrap;
}
.social img {
vertical-align:middle;
margin:-1px 0 1px 6px;
}
.social img + img {
margin-left:12px;
}
.footer {
/* outline:1px solid brown; /* TEST OUTLINE */
float:left;
padding-top:3px;
}
.footer p {
color:#dd4e00;
line-height:1.25em;
margin:3px 0 0;
}
/* modern ClearFix */
.cf:before,
.cf:after {
content:"";
display:table;
line-height:0;
}
.cf:after {
clear:both;
}
/* Contact Page */
.submit {
float:right;
border:0px;
border-radius:5px;
padding:5px 10px;
background-color:#ccc;
color:#000;
text-decoration:none;
}
.submit:hover {
background-color:#666;
color:#fff;
cursor:hand;
}
textarea {
font-size:12px;
font-family:Arial,Helvetica;
}
/* anchor treatments */
a {color:#faa31b;font-size:1em;}
a:link,
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
.menubg a:hover {text-decoration:none;border-bottom:1px solid #faa31b;}
.andrewcourtney a:link,
.andrewcourtney a:visited {color:#dd4e00;font-weight:bold;text-decoration:none;}
.andrewcourtney a:hover {color:#ff5533;text-decoration:underline;}
