I am attempting to create a webpage layout template my aim is header, footer and 2 column between, the 2 columns are what are giving me the biggest headache, I want the left column to be a fixed width, and the right column to fill the remaining area, I have successfully completed this also. But I also want both columns’ to fill the raining space vertically also and when the content fills more than the space I am looking each column to be scolded separately and not use the normal Brower scroll bar
My current html code is as follows
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="./style/default/style.css" />
</head>
<body>
<div class="container">
<div class="header">
HEADER
</div>
<div class="content">
<div class="content-contain">
<div id="content-col1">
COLUMN 1
</div>
<div id="content-col2">
COLUMN 2
</div>
</div>
</div>
</div>
<div class="footer">
FOOTER
</div>
</body>
</html>
CSS
* {
margin: auto;
}
html, body {
height: 99%;
background-color: #FFFFFF;
font-family:sans-serif;
}
.container {
min-height: 100%;
height: auto !important;
height: 99%;
margin: 0 auto -1em;
}
.header {
color:#FFFFFF;
background-color:blue;
border-bottom:3px solid blue;
}
div#content-col1{
float:left;
width:220px;
padding:3px;
display:block;
padding-left:5px;
overflow-y: auto;
background-color: red;
}
div#content-col2{
margin-left: 230px;
margin-bottom:40px;
padding: 3px;
overflow-y: auto;
background-color: green;
}
.footer {
background-color:yellow;
clear:both;
}
If anyone has a better or know what I can do to make this work sucessfully please let me know
Vip32
To fill the entire width with two columns where one has a fixed with, please refer to this question.
Vertical filling is a little different. On default, the body and block elements have a dynamic height. Because the body is dynamic too, you have to set it an height in order to make the content full vertically as well.
body, div#container, ... { height: 100%; }
Some people think it's best to apply an height to the html element as well. I have my doubts, because that tag is not visible.
If you have an element that requires some height as well, like an header, or footer, please refer to the same solution for fixed width's but apply it on the height instead.
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
I recently realized that we can't align multiple divs inside container horizontally - without a space between them and without using float.
I applied inline-block to the divs inside the container element and gave them width in %. but there appears to be some extra space. I know it's because of the hidden characters. Refer below image - Red line is container's
I want to make it like the below image using inline-block and take up the entire width of the container. I can't use flexbox to parent since I want to make it responsive and hide/reposition some elements after breakpoints. I also don't want to use floats since it pulls out the divs outside and make the container element useless. Also, it is meaningless to remove the spaces and tabs to make it work... it would be a mess to type the code in there.
Now come on CSS, there has to be something. It shouldn't be this frustrating and CSS shouldn't be this dumb.
Here's my code,
.container{
width: 100%;
height: auto;
}
.section{
display: inline-block;
}
.homebar{
width: 24%;
height: 600px;
background-color: #222;
}
.content{
width: 50%;
min-width: 500px;
height: 600px;
background-color: #fbfbfb;
}
.sidebar{
width: 24%;
height: 600px;
background-color: #158;
}
<div class="container">
<!-- Home/Menu Bar-->
<div class="section homebar">
</div>
<!-- Content Area -->
<div class="section content">
</div>
<!-- Sidebar Area -->
<div class="section sidebar">
</div>
</div>
To remove space between element which are placed as inline-block, set font-size:0px in parent div or second option is marking use of negative margin as below,
#container{
width:100%;
height:auto;
overflow:hidden;
border:2px solid red;
font-size:0px;
}
#container > .homebar{
width:33.2%;
height:200px;
display:inline-block;
background:yellow;
}
#container > .content{
width:33.3%;
height:200px;
display:inline-block;
background:green;
}
#container > .sidebar{
width:33.3%;
height:200px;
display:inline-block;
background:blue;
}
<div id="container">
<!-- Home/Menu Bar-->
<div class="section homebar">
</div>
<!-- Content Area -->
<div class="section content">
</div>
<!-- Sidebar Area -->
<div class="section sidebar">
</div>
</div>
I came across this issue recently and what i found out is that when using inline-block to align divs. Browser HTML automatically adds in default margin to the right of each div block due to font-size. The only solution i found good in my scenario was to join the divs by adding a right margin fix of -4px (default space used by browser due to default font-size) on the divs we have style display:inline-block;.
So just add margin-right:-4px; to your .section class that you will be good to go.
You can also use font-size:0px; on the .container class to achieve this as well but that will force you to reset font-sizes for each element within the container so that is why i went with the margin adjustment solution.
Hope this helps.
The reason why you get these gaps are because of the font-size of the divs.
Please note the solution:
div {
border: 1px solid black;
font-size: 0;
}
.container{
width: 100%;
height: auto;
}
.section{
display: inline-block;
}
.homebar{
width: 24%;
height: 600px;
background-color: #222;
}
.content{
width: 50%;
min-width: 500px;
height: 600px;
background-color: #fbfbfb;
}
.sidebar{
width: 24%;
height: 600px;
background-color: #158;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<!-- Home/Menu Bar-->
<div class="section homebar">
</div>
<!-- Content Area -->
<div class="section content">
</div>
<!-- Sidebar Area -->
<div class="section sidebar">
</div>
</div
</body>
</html>
Basically, I Always use normalize in my pages to solve the issues from the start.
I am new in Grails and displaying list of users by using list.gsp page but when list have less items say 1 or 2 then footer is appears after two record instead of taking it's fix position at bottom of browser.
I have tried by updating my css in main.css and also applying css to 'g:layoutBody' tag.but result is same.
Any one can please help me how to set footer at bottom.
i am using following css in 'g:layoutBody' tag-
<g:layoutBody style="position: fixed;left: 0px;bottom: 30px;width: 100%;"/>
my main.css has this code -
body {
background: #ffffff;
color: #333333;
margin: 0 auto;
max-width: inherit;
margin-left:20px;
margin-right:20px;
overflow-x: hidden; /* prevents box-shadow causing a horizontal scrollbar in firefox when viewport < 960px wide */
-moz-box-shadow: 0 0 0.3em #255b17;
-webkit-box-shadow: 0 0 0.3em #255b17;
box-shadow: 0 0 0.3em #255b17;
}
and footer css is
.footer {
background: #abbf78;
color: #000;
clear: both;
font-size: 0.8em;
margin-top: 1.5em;
padding: 1em;
min-height: 1em;
}
.footer a {
color: #255b17;
}
This is a purely HTML/CSS issue, so the same applies for GSPs and standard HTML pages.
What you're after is a "sticky footer", and it can be most easily achieved by wrapping your content in a container which pushes the footer to the bottom of the page.
Here's a working example (updated with content from question): http://jsfiddle.net/spikeheap/ujttV/2/
The key bits are to structure the HTML with something which extends below your content:
<body>
<div class="wrapper">
<div id="content">
...
</div>
</div>
<div class="footer">
This is a footer message
</div>
</body>
Then you can use CSS to set the height of the wrapper to be 100%:
html, body{
height: 100%;
}
.wrapper {
min-height: 100%;
}
Finally your footer can be clever and pull itself up from below the bottom of the page by using a negative margin-top:
.footer {
position: relative;
margin-top: -200px;
height: 200px;
background-color: #cecece;
}
You'll notice pretty quickly that if you make the window really small, or grow your content, that it's truncated, so your content block should have padding equal to the footer height (to make sure it pushes it down when it fills the space:
#content {
padding-bottom: 200px;
}
Update
The layoutBody tag is used for rendering the body of your gsp, so you could have layouts/mytemplate.gsp:
<!DOCTYPE html>
<html>
<head>
<g:layoutHead />
</head>
<body>
<div class="wrapper">
<div id="content">
<g:layoutBody />
</div>
</div>
<div class="footer">
This is a footer message
</div>
</body>
And then in (for example) index.gsp:
<head>
<meta name="layout" content="mytemplate">
</head>
<body>
Welcome to my website. Check out the amazing footer
</body>
What is the easiest way to align a div to center widthout using position. i have 3 div and i want to set center of page with using CSS
<!doctype html>
<html lang="en">
<head>
<title></title>
</head>
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
float:right;
}
</style>
<body>
<div id="content">
content 1
</div>
<div id="content">
content 2
</div>
<div id="content">
content 3
</div>
</body>
</html>
You are using same ids multiple time. ids must be unique.
Use class instead.
Wrap all content divs in an element:
HTML:
<div class="container">
<div class="content">content 1</div>
<div class="content">content 2</div>
<div class="content">content 3</div>
</div>
CSS:
.container {
width:606px; /* (200*3) = 600 + (6px for borders) */
margin:0 auto;
}
.content {
width: 200px;
height: 200px;
border: 1px solid #000;
float:left;
}
DEMO here.
First of all, don't use ID like class, you can repeat ID so many times but it's a bad practice.
And I'm not sure if I understood it right, but remove float:right from your css which will get your div's one below another. You can see output fiddle
Here is the css with few line of code
.container{width:100%;}
.container div{border:1px solid red;margin:0 auto;width:200px;}
Give it a width and do margin: 0 auto;
Ow, and use an unique id.
first of all you are using "id" selector for 3 elements/containers which is wrong.
replace the style with below snippet
<style>
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
}
</style>
i just have removed the floating (which forcing your containers to be on right)
Wrap divs with a parent div and add margin:0 auto
.wrapper{
width:200px;
margin:0 auto;
border:solid 2px red
}
.content{
background:grey;
}
DEMO
You want to modify your code as less as possible?
Then you might want to delete your floating:
#content {
width: 200px;
height: 200px;
margin:0 auto;
border: 1px solid #000;
/*float:right;*/
}
Because you are using a margin to center the element, a float is not neccesary. A float will only put the element out of the flow(so basically the <body> doesn't see these elements as his content, which results that the elements cannot center them selves from their parent. There is no parent of the same flow!)
jsFiddle
It is also a good call to not use the same IDs. IDs should always be unique
However same IDs are supported by CSS, but it is a good practice to use unique IDs from now on.
You can use the margin: 0 auto; on the element which has to be placed in the center. However in order to do this the element must have some sort of a wrapper(not "body") to be able to use the auto setting.
<html>
<head>
</head>
<body>
<div id="page_wrapper">
<div id="div_1" class="centered_div">foo</div>
<div id="div_2" class="centered_div">foo</div>
<div id="div_3" class="centered_div">foo</div>
</div>
</body>
</html>
CSS:
#page_wrapper{
width:100%;
}
.centered_div{
margin: 0 auto;
}
This centers all elements which have the class centered_div to the middle of their parent.
Other option is to used fixed canter position. For example if you're creating a popup notification message, this might be a way to go.
.notification_window{
position: fixed;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
But if it's just a regular page element like a div with some content use the first example.
If you need any further explanations please comment.
I have two pages that differ only by the content contained in the content-box div tag. You can see them here:
Tall Version
Short Version
I have included the html/css code for the short version below. I would like to have the short version display so that if the amount of content does not fill up the entire page, the footer will still stick to the bottom AND the entire area between the header and the footer in the middle of the screen is the white corresponding to the content-box div.
What do I need to change to accomplish this?\
Update 1 I made a new page doing what #smallworld suggested. It can be seen here. This has a sticky footer, but I would like the outside "container" box to extend the height of the page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii">
<style type="text/css">
#main {
width: 100%;
min-height: 100%;
height: 100%;
}
body {
width: 100%;
}
#header,#content { position:relative; right:0;left:0}
#header{
height:75px; top:0;
background: #4396CA;
}
#footer{
width: 100%;
position: relative;
height:50px;
bottom: 0;
left: 0;
background: #4396CA;
}
#content{
top:00px;
background: #F0F8FF;
min-height: 100%;
height: 100%;
}
#content-box {
width: 950px;
margin: 0 auto;
background-color: #FFFFFF;
text-align: left;
border-right: 1px solid #B0B0B0;
border-left: 1px solid #B0B0B0;
padding-bottom: 20px;
padding-top: 20px;
min-height: 100%;
height: 100%;
}
</style>
<title>EmbeddedAnalytics - Test Page</title>
</head>
<body>
<div id="main">
<div id="header">this is header</div>
<div id="content">
<div id="content-box">
<b>Content does not take up all of box. But still want footer to "stick" to bottom</b><br>
line1<br>
line2<br>
line3<br>
Last Line<br></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
EDIT: See jsfiddle at http://jsfiddle.net/smallworld/gcpNh/ - I have used class="xyz" instead of using id="xyz" in your example. I know that stretching to 100% height shouldn't be as difficult and stressful, but in reality, it is. I feel your pain and that's why trying to help as much as I can. I made one more correction - it should have been padding-bottom, not margin-bottom on "main" class.
CSS:
html { height:100%;min-height:100% !important;margin:0;padding:0; /** see height, min-height values here. **/ }
body{ overflow:auto;padding:0;margin:0;height:100%;min-height:100% !important; /** see height, min-height values here. **/ }
.main {
position:relative;min-height:100%; height:auto; background:cyan;
/** see position, height, min-height values here. Height auto to make sure
that main div resizes if window size changes after initial rendering **/
}
.header { display:block;height:50px;position:relative;background:yellow;text-align:center;padding:10px; }
.content { padding:20px;margin-bottom:50px; /** bottom margin here to make sure that footer does not cover the content area **/ }
.footer { display:block;position:absolute;bottom:0;left:0;width:100%;height:50px;background:red;color:white;text-align:center;padding:10px; /** see position, top, left, and width properties here. **/ }
HTML
<div class="main clearfix">
<div class="header">header</div>
<div class="clearfix content">
<h1>Goal of this fiddle is to demonstrate sticky footer implementation</h1>
And domonstrate this with least amount of CSS and HTML, without using any extraordinary hacks.
<p>Your content goes in here. Add lot more content, and resize browser window to several different sizes to see how your page is rendered as compared to with very little content.</p>
</div>
<div class="footer">footer</div>
</div>
I have 3 floated left objects, the one on the left will change in size all the time. The right on will always be fixed in size. The center one I want to fill up the space between the two outer divs. Right now that's not working though. If I set the width of the center div to 100% it gets way too big.
Not sure how this should be handled.
edit: code sample
<div style="width:1000px">
<div style="float:left;">1</div>
<div style="float:left;">Lots of text in here that can be any size....</div>
<div style="float:left; width:100px;">Date/Time</div>
</div>
The first div is dynamic in size. If the number is 10 it's going to take up more space than the number 1. The second div will be dynamic as well, I want that to take up whatever space isn't take up by the first and third div.
HTML
<div style="width:1000px">
<div id="left">1</div>
<div id="right">Date/Time</div>
<div id="center">Lots of text in here that can be any size....</div>
</div>
CSS
#left {
float: left;
width: 20%;
}
#center {
margin-left: 20%;
margin-right: 100px;
}
#right {
float: right;
width: 100px;
}
See fiddle.
Try this:
<!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" xml:lang="en" lang="en">
<head>
<title>How do I make a floating div dynamically expand to take up maximum space?</title>
<style type="text/css">
#left {
float:left;
border:1px solid red;
}
#right {
float:right;
border:1px solid green;
width:100px;
}
#center {
overflow-x:hidden;
border:1px solid blue;
}
</style>
</head>
<body>
<h1>How do I make a floating div dynamically expand to take up maximum space?</h1>
<div id="left">
Un-fixed width left, whose content may change.
</div>
<div id="right">
Fixed WIdth Right column which shouldn't expand.
</div>
<div id="center">
The center content<br />Which should expand as necessary
</div>
</body>
</html>
You probably found this out long ago, but for the next guy, you can do this now with CSS3 flexbox. (W3c's newest specification, Mozilla documentation, css-tricks)
HTML
<div class="flex-container">
<div>1</div>
<div class="expandable">Lots of text in here</div>
<div style="float:left; width:100px;">Date/Time</div>
</div>
CSS
.flex-container {
display: flex;
width: 1000px;
border: 1px solid black;
}
.expandable {
flex: 100 100;
text-align: center;
}
Here is the jsfiddle.