I have seen a number of similar questions, but have not found an answer for what I am looking for. Further information is as follows:
I am using twitter bootstrap, so I would like a solution that is compatible with it
The layout will look like this. Sorry I cannot embed the image because I need 10 pts first.
This is as close as I have gotten so far. The problem is that I cannot get the sidebar to stop at the footer.
I will need the main content to expand the same as the sidebar.
The sidebar and Main Content are two different colors and vary in size. They must both extend to the footer
Notice that the minimum height must be 100%
The footer should move if the content grows too much (i.e. it would require scrolling to see it)
I do no want to use JavaScript, but if it is required I wouldn't mind a solution with so long as it is progressively enhanced with the JS (I am also using jQuery).
The page content is centered horizontally with a fixed width
I think this might be, what you are looking for: two column layout source.
The main idea is to set height: 100% on both <body> and <html> and then make sure that the container also takes up all the height (via min-height: 100%). You might notice that code also contains workaround for IE6, because it was originally written, when fighting IE6 was just another day of work.
This was made by modifying a bit more complicated and more often used holy grail layout source.
Via css it may be possible but need some tricks.
You need to make both divs/columns very very tall by adding a padding-bottom: 1000px and then "trick the browser" into thinking they aren't that tall using margin-bottom: -1000px. It is better explained via example below.
http://jsfiddle.net/mediasoftpro/Ee7RS/
Hope this will be ok.
You can try with display:table; to Parent Div and display:table-cell; to Child Div for achieving your results....
see the code :-
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
.container {
background:red;
width:600px;
display:table;
}
.left {
background:yellow;
width:200px;
display:table-cell;
}
.mid {
background:blue;
width:400px;
display:table-cell;
}
.right {
background:green;
width:200px;
display:table-cell;
}
</style>
</head>
<body>
<div class="container">
<div class="left">shailender</div>
<div class="mid">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
fff</div>
<div class="right">afdafaf</div>
</div>
</body>
</html>
Demo:- http://jsbin.com/ebucoz/13/edit
Read More About Fluid Width Equal Height Columns with Examples
Hey i think you want this
Css
**
.wraper, .header, .footer{
width:80%;
margin:0 auto;
overflow:hidden;
border:solid 2px red;
}
.header{
height:100px;
background:green;
border-color:darkred;
}
.sidebar{
width:20%;
background:yellow;
float:left;
}
.content{
width:70%;
background:pink;
float:right;
}
.footer{
height:100px;
background:blue;
border-color:black;
}
#container2 {
background: none repeat scroll 0 0 #FFA7A7;
clear: left;
float: left;
overflow: hidden;
width: 100%;
}
#container1 {
background: none repeat scroll 0 0 #FFF689;
float: left;
position: relative;
right: 75%;
width: 100%;
}
#sidebar {
float: left;
left:76%;
overflow: hidden;
position: relative;
width: 20%;
text-align: justify;
}
#content {
float: left;
left: 81%;
overflow: hidden;
position: relative;
text-align: justify;
width: 72%;
}
**
HTML
<div class="header">header bar </div>
<div class="wraper">
<div id="container2">
<div id="container1">
<div id="sidebar">
This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text
</div>
<div id="content">
This is dummy text here This is dummy text here This is dummy
</div>
</div>
</div>
</div>
<div class="footer">Footer bar</div>
Live demo http://jsfiddle.net/rohitazad/Pgy75/2/
more about this click here http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
The only real answer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<table border="1" height="100%" width="100%">
<tr>
<td width="10%">
left
</td>
<td>
right
</td>
</tr>
</table>
Related
I'm trying to design a page header style where two images start from either side of header text, and extend outward to the full width of the screen. Meanwhile, the position of the header text needs to stay left-aligned with the position of the other page content that flows below it, which has a width of 100% but a max-width of 1280px. I don't want the images to be cut off by the text.
Here's an image of what I'm trying to achieve:
Image showing tight width screen vs. large width screen
I want the text to not cut off the circles seen on its left and right sides.
What I've tried:
I've tried positioning the two images using ::before and ::after, however, I haven't found a way to set the start of those pseudo-elements to the start and end of the text span.
I could just set a background image on a full-width container containing the header text, but then I'd have to apply a white background to the header text span, which leads to cutting off of the image as it goes behind the text -- not ideal.
Display:flex gets me closest to the behaviour I want (with left and right divs hugging either side of the div containing the text span and filling the rest of the screen space), however, no straightforward way to make sure the left edge of the text is aligned to the left edge of the rest of the body content. The flex solution works if I wanted centered text, but I need left-aligned text.
CSS grid is something I've considered but it seems like I wouldn't get the hugging behaviour I want while still aligning well with page content.
Thanks!
--EDIT: I tried to include some code of the best solution I have gotten so far which was with display:flex. I had to simplify it from my source code and couldn't get this to run, unfortunately, apologies as I'm quite new to posting on S.O.. --
body {
margin: 0px auto;
width: 100%;
background-color: #333;
}
.page-header {
display:flex;
background-color:#fff;
}
.left {
flex:auto;
background-image: url("[image]");
background-repeat:repeat-x;
background-position: right bottom 20px;
}
.text {
flex:initial;
text-align: center;
max-width: 1280px;
}
.right {
flex:auto;
background-image: url("[image]");
background-repeat:repeat-x;
background-position: left bottom 20px;
}
.body-content-wrapper {
max-width: 1280px;
padding: 2.5%;
background-color: #333;
}
and
<body>
<div class=“page-header”>
<div class=“left”>The left image</div>
<div class=“text”><h1>The page header text</h1></div>
<div class=“right”>The right image</div>
</div>
<div class=“body-content-wrapper”>
[rest of page content]
</div>
</body>
EDIT
Here's an image of what I'm trying to avoid with the header image: it being "cut off" on either side of the text (the left-side dots in the header should start at the left side of the text and extend to the edge of the screen, while the right-side dots should start at the immediate right side of the text and extend rightward to the edge of the screen).
You don't need :before and :hover. As long as you know your max-width then you should be fine with a combination of max-width, setting your left and right margins to auto, and using flexbox for the image columns.
Note that I'm using max-width: 500px in the example below so it fits within the StackOverflow page a bit nicer.
.header {
background-image: url(https://i.imgur.com/Iypn3mA.jpg);
background-position: center center;
background-repeat: repeat-x;
background-size: 50%;
}
.header .container {
display: flex;
}
.header h1 {
background-color: #fff;
padding: 0 10px;
}
.container {
margin: 10px auto;
max-width: 500px;
}
.columns {
display: flex;
flex-direction: row;
}
.columns > * {
flex-grow: 1;
}
.columns > :not(:first-child) {
margin-left: 10px;
}
img {
display: block;
width: 100%;
}
<div class="body">
<div class="header">
<div class="container">
<h1>I am some variable text</h1>
</div>
</div>
<div class="container hero">
<img src="https://via.placeholder.com/2400x800?text=hero" />
</div>
<div class="container columns">
<div>
<img src="https://via.placeholder.com/1000x1000?text=1" />
</div>
<div>
<img src="https://via.placeholder.com/1000x1000?text=2" />
</div>
<div>
<img src="https://via.placeholder.com/1000x1000?text=3" />
</div>
</div>
</div>
I figured out a solution using calc()
You won't see the dots image in this example but can see how the left and right header divs allow me to position the background image relative to the start and end of the page title text, without being cut off by the page title div.
.header-parent {
background-color:#fff;
display:flex;
padding-top: 200px;
}
.body-parent {
position: relative;
margin:0px auto;
background-color: #fff;
width:100%;
max-width:300px;
}
article {
padding: 10px;
}
.left-dots {
width: calc((100% - 300px) / 2);
background-color:#78AA56;
background-image: url("img.png");
background-repeat:repeat-x;
background-position: right bottom 20px;
}
.title {
flex:initial;
min-height: 50px;
margin:0 10px;
}
.right-dots {
background-color:#CC4483;
background-image: url("img.png");
background-repeat:repeat-x;
background-position: left bottom 20px;
flex:auto;
}
<div class="header-parent">
<div class="left-dots"></div>
<div class="title"><h1>Page title</h1></div>
<div class="right-dots"></div>
</div>
<div class="body-parent">
<article>text text text text
Body text
Where its left margin lines up with the page title margin
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac dictum nisi. In vulputate in purus non laoreet. Nullam non ligula congue, porta lorem fermentum, feugiat urna. Quisque mollis nisl et risus malesuada vulputate. Nullam id efficitur odio, quis interdum augue. Praesent volutpat bibendum tellus, non pellentesque arcu. .</article>
</div>
I have four divs in the container, three of them are float and the last one is normal div without float. Why is my text div put beneath all three float divs and the height of my text div adds up all three float divs' height together? Theoretically，float elements are taken out from the element flow, so my text div should be placed on the very top of the container and it's height should just be the line height? please help me.
#fd
{
width:100px;
height:150px;
background-color:red;
float:left;
}
#sd
{
width:150px;
height:100px;
background-color:blue;
float:left;
}
#td
{
width:100px;
height:100px;
background-color:green;
float:left;
}
#container
{
width:300px;
height:500px;
background-color:darkgray;
}
#text
{
background-color:aqua;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="basic.css">
<title>Insert title here</title>
</head>
<body>
<div id=container>
<div id=fd></div>
<div id=sd></div>
<div id=td></div>
<div id=text>aaaaaaabbbbb</div>
</div>
</body>
</html>
As a simple illustration, consider your mark-up and the following CSS.
In CSS, the floated elements are first taken out of the flow and the regular content positioned.
Then the floated element are allocated space by wrapping the content around them such that the floated elements are placed as far left and as close to the top edge of the containing block as possible (taking into account other floated elements). The text/content wraps around the edges of the floated elements.
To get a full appreciation of the nuances, you need to read the CSS specification about how floats work.
Ref: http://www.w3.org/TR/CSS21/visuren.html#floats
In your example, because the floated elements are either wide enough or tall enough, the regular, inflow content starts below the bottom edge of the floated elements, which is as close to the top edge of the parent block that the content can appear after taking into account the dimensions of the floated elements.
.container {
width: 300px;
border: 1px dotted blue;
overflow: auto;
}
.floater {
float: left;
width: 50px;
height: 50px;
}
#fd {
background-color: red;
}
#sd {
background-color: blue;
height: 100px;
}
#td {
background-color: green;
}
<div class="container">
<div class="floater" id="fd"></div>
<div class="floater" id="sd"></div>
<div class="floater" id="td"></div>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing.</div>
</div>
First of all your container width is 300px and ur 3 divs are 350px wide.this means its overflowing or out of the container to push the text div.if that dosen't help Try Useing
z-index:9999;
position:absolute;
width:80%;
for text div
I'm not exactly sure what you're trying to achieve but if you place the text div at the top and then place a clearing element after it (before the three floated divs) you will end up with the text at the top. Although I did have to change the width of one of the divs to make them all fit in the 300px width container .. see below:
HTML
<div id=container>
<div id=text>aaaaaaabbbbb</div>
<br class="clear" />
<div id=fd></div>
<div id=sd></div>
<div id=td></div>
</div>
CSS
#fd {
width:100px;
height:150px;
background-color:red;
float:left;
}
#sd {
width:100px;
height:100px;
background-color:blue;
float:left;
}
#td {
width:100px;
height:100px;
background-color:green;
float:left;
}
#container {
width:300px;
height:500px;
background-color:darkgray;
}
#text {
background-color:aqua;
}
.clear {
float: none;
}
}
I am new to css.
I have made 2 div's. Both contain some text.
The first div is a box that will vary in width. I want the second box to always be 50px to the right of the first box, no matter what the width of the first box is.
How can I do this with css?
(I currently have the left box set as absolute positioning)
HTML:
<div id="box1">
<div id="box2"></div>
</div>
CSS:
#box1 {
position:absolute;
left:0; top:0;
width:200px; height:200px;
background:red;
}
#box2 {
position:absolute;
right:-150px; top:0;
width:100px; height:100px;
background:blue;
}
This solution only works if the width of the right DIV is fixed. In that case, set the right property to - ( width + 50 ) px. In my example, it's -150px.
Live demo: http://jsfiddle.net/simevidas/U47Ch/
Like this,
* {padding: 0; margin: 0;}
div {float: left; height: 100px;}
#left {padding: 0 50px 0 0; width: 100%;}
#right {position: absolute; right: 0; top: 0; width: 50px;}
<div id="left">
<div id="right">
</div>
</div>
This will do the trick.
I think this works with any length text in either column, in any size container:
<style type="text/css">
#left {padding-right:100px; float:left; display:inline; position:relative;}
#right {position: absolute; right: 0px; top: 0px; width: 50px; overflow:hidden;}
</style>
<div id="left">
<div id="right">
Lorem ipsum dolor sit amet, consectetur
</div>
Aliquam congue odio sed dolor rhoncus malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum elementum pellentesque.
</div>
Tested in FireFox only. The right padding of #left must always be width of #right plus 50.
<style type="text/css">
#divBox2 { margin-left: 50px; }
</style>
Margin simply adds 50px to the left of box2, meaning there will always be 50px of space left of box2, thus between box 1 and 2, also remove absolute positioning of box 1.
<div id="divBox1">
</div>
<div id="divBox2">
</div>
I have a header on my page which is just over 100px (111px to be exact)
The div below it needs to extend to the bottom of the viewport, as if i had set the bottom to 0px. The problem lies in the fact that i cannot specify top and bottom in ie6 (bug).
I can either specify top: 111px or bottom: 0px, but i still need the height to be correct ie. 100% -111px, according to the size of the viewport.
Can't seem to get expressions working coz that seems to be the solution
Here's my css code:
position: absolute;
width: 200px;
top: 111px;
bottom: 0px;
Any suggestions?
The best way to do this is to use view port styles. It just does the work and no other techniques needed.
Code:
div{
height:100vh;
}
<div></div>
I added the height property to the body and html tags.
HTML:
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
CSS:
html, body
{
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#wrapper
{
height: 100%;
min-height: 100%;
}
#header
{
height: 111px;
}
Alternatively, you can just use position:absolute:
#content
{
position:absolute;
top: 111px;
bottom: 0px;
}
However, IE6 doesn't like top and bottom declarations. But web developers don't like IE6.
div{
height:100vh;
}
<div></div>
Now with css3 you could try to use calc()
.main{
height: calc(100% - 111px);
}
have a look at this answer:
Div width 100% minus fixed amount of pixels
div{
height:100vh;
background-color:gray;
}
<div></div>
I'm guessing that you are trying to get sticky footer
Negative margins of course!
HTML
<div id="header">
<h1>Header Text</h1>
</div>
<div id="wrapper">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
ullamcorper velit aliquam dolor dapibus interdum sed in dolor. Phasellus
vel quam et quam congue sodales.
</div>
</div>
CSS
#header
{
height: 111px;
margin-top: 0px;
}
#wrapper
{
margin-bottom: 0px;
margin-top: -111px;
height: 100%;
position:relative;
z-index:-1;
}
#content
{
margin-top: 111px;
padding: 0.5em;
}
100vh works for me, but at first I had used javascript (actually jQuery, but you can adapt it), to tackle a similar problw.
HTML
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
</body>
js/jQuery
var innerWindowHeight = $(window).height();
var headerHeight = $("#header").height();
var contentHeight = innerWindowHeight - headerHeight;
$(".content").height(contentHeight + "px");
Alternately, you can just use 111px if you don't want to calculate headerHeight.
Also, you may want to put this in a window resize event, to rerun the script if the window height increases for example.
I'm trying to get the footer in my site to look like this:
Wilgrove Baptist Church Home | About | Ministries 1234 S. Main st.
John G. Smith, Sr. Pastor Contact Us | Site Map somwhere, ID 55555
My problem is getting it laid out into the 3 columns. Any suggestions?
Thanks!
Quite easily done using floats:
<div id="footer">
<p class="left">Left aligned text here<br />Next line here</p>
<p class="right">Right aligned text here<br />Next line here</p>
<p class="centered">Center Text here<br />Next line here</p>
</div>
and the CSS:
.left{
text-align:left;
float:left;
}
.right{
float:right;
text-align:right;
}
.centered{
text-align:center;
}
Here are a list of three column CSS layouts. Alistapart.com also has an article on it.
I'd recommend reviewing the 'Three Column CSS layouts' list; each link goes into detail about what it looks like from a 'Newspaper Layout' standpoint, as well as the advantages and disadvantages of each. I used it for a three column layout for the site I'm maintaining.
<div id="footer">
<div>foo</div>
<div>bar</div>
<div>baz</div>
</div>
#footer { display: table; width: 100%; table-layout: fixed; }
#footer > div { display: table-cell; }
This won't work in IE 7 and prior, though. In that case I recommend serving them (through IE conditional comments) markup similar to alex, where you use simple floats. These won't center properly, but they'll certainly work, and as people upgrade to IE8 or a better browser they'll automatically upconvert to the display:table solution.
I used the following code on my own site.
HTML:
<footer>
<aside class="footer-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</aside>
<aside class="footer-right">
Aenean elit ante, ultrices ac vestibulum id, tempor id nisi.
</aside>
<aside class="footer-center">
Integer tincidunt, sem at placerat ullamcorper, urna felis condimentum justo.
</aside>
</footer>
CSS:
footer [class ^= 'footer-'] {
width: 33.3333%;
display: inline-block;
text-align: center;
}
footer .footer-left {
float: left;
}
footer .footer-right {
float: right;
}
All content will be center-aligned because that's what I wanted. You can easily change this, though.
To have three columns of almost equal width:
HTML:
<div id="footer">
<p>First section, first line of text<br /> Second line of text</p>
<p>Second section, first line of text<br /> Second line of text</p>
<p>Third section, first line of text<br /> Second line of text</p>
</div>
CSS:
#footer > p:first-child {
float: left;
text-align: left;
width: 33.3%; }
#footer > p:nth-child(2) {
float: left;
text-align: center;
width: 33.4%; }
#footer > p:last-child {
float: right;
text-align: right;
width: 33.3%; }
Compared to Jayx's answer, I've simplified the markup and used different selectors in the stylesheet.
Read more about fractional percentage lengths.
Actually, the text-align code works other than the fact that you have the text angling toward the end. To fix this, simply apply a margin-top negative value to line up with the left text.
Take a look...
#left {
text-align:left;
}
#right {
text-align:right;
margin-top:-35px;
}
#center {
text-align:center;
margin-top:-35px;
}
Try this:
<div style="float:left; padding:10px;">left</div>
<div style="float:left; padding:10px;">center</div>
<div style="float:left; padding:10px;">right</div>
You can adjust the padding, etc. accordingly.