I tried to create a new layout for my site using inline-block instead of float.
<div id="container">
<div class="row"><!-- HEADER -->
<div class="pan1">
<div class="content">
HEADER LEFT PANEL <br /><br />
</div>
</div>
<div class="pan2">
<div class="content">
HEADER RIGHT PANEL <br/></div>
</div>
</div>
</div><!-- END HEADER -->
<div class="row"><!-- MAIN -->
<div class="pan3">
<div class="content">
MAIN LEFT PANEL <br /><br />
</div>
</div>
<div class="pan4">
<div class="content">
MAIN RIGHT PANEL <br/></div>
</div>
</div>
</div><!-- END MAIN -->
</div>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #f5f6f7;
}
#container {
width: 960px;
margin-left: auto;
margin-right: auto;
background: #ccc;
}
.row {
margin-top: 10px;
background: #fff;
padding: 0px;
}
.pan1 {
width: 700px;
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
}
.pan2 {
width: 256px;
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
}
.pan3 {
width: 500px;
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
}
.pan4 {
width: 456px;
display: inline-block;
vertical-align: top;
*zoom: 1;
*display: inline;
padding: 0px;
font-size: 0;
}
.content {
padding: 0px;
border: 1px solid #000;
font-size: 12px;
}
unfortunately I can not understand why it is not considered the hack to remove the white space between panels inline-block and also the main block turns out to be not aligned with my header block. Can you give me any suggestions on how I could make a correct layout? thanks
the problem is within your html tags. you put other/extra ending </div> that is why the main block is not aligned like the header block
to remove the white space you will need to do this
<div>
// content
</div><div>
// content
</div>
<div id="container">
<div class="row"><!-- HEADER -->
<div class="pan1">
<div class="content">
HEADER LEFT PANEL <br /><br />
</div>
</div><div class="pan2">
<div class="content">
HEADER RIGHT PANEL <br/>
</div>
</div>
</div><!-- END HEADER -->
<div class="row"><!-- MAIN -->
<div class="pan3">
<div class="content">
MAIN LEFT PANEL <br /><br />
</div>
</div><div class="pan4">
<div class="content">
MAIN RIGHT PANEL <br/>
</div>
</div>
</div><!-- END MAIN -->
</div><!-- END CONTAINER -->
look at this for the demo
To remove spaces between blocks, you can try to write your html like this:
<div>
...
</div><div>
...
</div>
Having element start just after an other one will prevent the browser to add whitespaces between elements. It also means that you can't have newlines between elements. If I was you, I could instead think of using a minificator that will remove unnecessary whitespaces.
Related
This image shows what I am trying to do.
Basically, I have a header and footer inside the body. I have a div1 inside a header which has a size that can vary. I want to align div2, which is inside the footer, so that its right border is matches the right border of div1.
The following HTML can explain the structure.
<body>
<div id="header">
<div id="div1">
</div>
</div>
<div id="footer">
<div id="div2">
</div>
</div>
This would be the css.
#div1 {
overflow: auto;
display: grid;
float: start;
}
#div2 {
width: 20px;
// ??????
}
There's no float: start. You just be better off having a common container, as how it is in Bootstrap and other frameworks to "contain" your code. So your page might be rendered well this way:
body {
font-family: 'Segoe UI';
background: #ffa500;
}
#header {
background-color: #fcc;
padding: 10px;
}
#footer {
background-color: #f99;
padding: 10px;
}
.container {
max-width: 65%;
overflow: hidden;
}
#div1 {
padding: 10px;
background-color: #99f;
}
#div2 {
padding: 10px;
background-color: #ccf;
float: right;
width: 50%;
}
<div id="header">
<div class="container">
<div id="div1">
div1
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div id="div2">
div2
</div>
</div>
</div>
Preview
I am attempting to put together a web page that has four areas: a header, footer, content, and controls. The header and footer should be fixed at the top and bottom of the page (respectively) and automatically size to their content. The controls should go on the far right side of the page (vertically between the header and footer) and is fixed-width. The content area should fill the remainder of the page.
I had this working, but now whenever I add any kind of content (even just a single-word paragraph element), the controls area moves to almost the very bottom of the page. You can see what I'm referring to here: http://jsfiddle.net/ym8vY/1/
If I leave the controls div completely empty, it lays out exactly how I want it: http://jsfiddle.net/ym8vY/
My body currently looks like:
<header>
<p>Header</p>
</header>
<div class="main">
<div id="streamGraph" class="page">
<div class="page-row">
<div class="page-content-container-outer">
<div class="page-content-container-inner">
<div id="graphContainer" class="page-content"></div>
</div>
</div>
<div class="page-controls-container-outer">
<div class="page-controls-container-inner">
<div class="page-controls"><!-- If anything goes inside here, it breaks -->
<div style="display: table; height: 100%;">
<div style="display: table-row; height: 0;">
<div>
<label for="sampleCount"># Samples:</label>
<input type="text" id="sampleCount" name="sampleCount" value="100" />
</div>
<div>
<label for="tagCount"># Tags:</label>
<input type="text" id="tagCount" name="tagCount" value="25" />
</div>
<div>
<label for="fromDate">From:</label>
<input type="date" id="fromDate" name="fromDate" />
</div>
<div>
<label for="toDate">To:</label>
<input type="date" id="toDate" name="toDate" />
</div>
<button id="tagsButton">Customize Tags</button>
<button id="refreshButton">Apply</button>
</div>
<div style="display: table-row;">
<div id="tagContainer" style="overflow: auto; height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>Footer</p>
</footer>
And my CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
display: table;
}
header, .main, footer {
display: table-row;
width: 100%;
}
header, footer {
background: lightgray;
}
.main {
height: 100%;
}
.page {
height: 100%;
display: table;
}
.page-row {
display: table-row;
width: 100%;
}
.page-content-container-outer {
display: table-cell;
width: 100%;
height: 100%;
padding: 10px;
}
.page-controls-container-outer {
display: table-cell;
height: 100%;
padding: 10px;
}
.page-content-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
width: 100%;
height: 100%;
padding: 5px;
}
.page-controls-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
height: 100%;
padding: 5px;
}
.page-controls {
height: 100%;
width: 300px;
}
.page-content {
height: 100%;
}
Your right-side div is being pushed down to the baseline. Add vertical-align:top to fix it:
div
{
vertical-align: top;
}
JSFiddle
Side note: The default value for vertical-align is baseline. Always keep this in mind when using cells and inline-blocks.
Add vertical-align:top; to your .page-controls-container-outer class
Change this
<div style="display: table-row; height: 0;">
to this
<div style="display: table-row; height: 0; float:left;">
I'm struggling with an IE6 float issue. (I know IE6 sucks but my huge company uses it..) I've created a simple, header, body, footer layout, with a content area and sidebar within the body. Essentially a common blog layout.
I've had no problem achieving this in IE6 but within the content area I've tried to create a featured area div across the top, then below it two divs side by side. It looks fine in modern browsers but in IE6 it puts the 2nd div below the 1st. Like the divs are too big for the container so it pushes the 2nd. But that shouldn't be the issue since they are both small enough (width, padding, margin) to fit..
And here's my code:
HTML
<body>
<div id="page-wrap">
<div id="header">
</div>
<div id="content">
<div id="feature">
</div>
<div class="clear"></div>
<div id="#1">
</div>
<div id="#2">
</div>
</div><!--Content End-->
<div id="sidebar">
</div>
<div class="clear"></div>
<div id="footer">
</div>
</div><!--Body Content End-->
</div><!--Page Wrap End-->
</body>
CSS
#page-wrap {
width: 960px;
margin: 0 auto;
background-color: #fff;
}
#header {
width: 954px;
height: 50px;
padding: 10px 0;
margin: 0 3px 2px 3px;
border-bottom: #7E7871 dotted 3px;
}
#content {
float: left;
width: 650px;
margin: 0;
padding: 15px 5px 0 15px;
}
#feature {
width: 650px;
margin: 0;
}
#content #1 {
border-right: thin solid #CCC;
width: 305px;
margin: 0;
padding: 0;
float: left;
}
#content #2 {
width: 305px;
margin: 0;
padding: 0;
float: right;
}
#sidebar {
float: right;
width: 250px;
padding: 0 10px 20px 10px;
margin: 0;
background: url(../_images/bg_aside.gif) repeat-y;
}
Since you haven't provided much detail as to how your HTML/CSS doesn't work in your browser, the only error I can find in your code is you have a stray </div>:
<body>
<div id="page-wrap">
<div id="header">
</div>
<div id="content">
<div id="feature">
</div>
</div>
<div class="clear"></div>
<div id="programs">
</div>
<div id="discounts">
</div>
<div class="clear"></div>
--> </div><!-- THIS ONE! -->
<div id="sidebar">
</div>
<div class="clear"></div>
<div id="footer">
</div>
</div><!-- Body content end -->
</div><!-- Page wrap end -->
</body>
One of the reasons it will dip below is due to content being larger than the div.
However, your css does not match the provided HTML. It's hard to debug some of this without the actual content.
Assuming #2 and #1 are #discounts and #programs, I suggest adding an overflow: scroll; to see how it changes.
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari
I am putting together a dynamic photo gallery and getting stuck trying to place thumbnails. Basically I am trying to place each thumbnail and caption in its own DIV, floated to the left. The thumbnails are working just as I want them to but for some reason the parent DIV refuses to cover the height of the thumbnail area. Here is the CSS I am using..
#galleryBox {
width: 650px;
background: #fff;
margin: auto;
padding: 5px;
text-align: center;
}
.item {
display: block;
margin: 10px;
padding: 10px;
float: left;
background: #353535;
min-width: 120px;
}
.label {
display: block;
color: #fff;
}
I have tried height: auto and that hasn't done anything. Here is what I am trying to style:
<div id="galleryBox" class="ui-corner-all">
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
<div class="item ui-corner-all">
<img src="http://tapp-essexvfd.org/images/ajax-loader.gif" alt="test"/><br/>
<p><span class="label">Testing</span></p>
</div>
</div>
Thanks!
Give your wrapper div an overflow: auto; so it contains the floated children correctly, like this:
#galleryBox {
overflow: auto; /* Only addition to your current styles */
width: 650px;
background: #fff;
margin: auto;
padding: 5px;
text-align: center;
}
This requires no HTML changes, just the style should do.
You need a clearfix
Add the below code to your css file and set the class of #gallerybox to clearfix
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
UPDATE:
Link