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.
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 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>
Hi there I know that is a silly question but I couldn't find a solution for this case, my css skills are not good :(.
How can I achieve the layout below.
The text should wrap at the end of the container(div,span,whatever)
---- --------------------------
|URL:|thissdfsisalongurasdsdfrea|
----|allyyyyyyyyyyylonggggggggg|
|sdddfasdfsdfasdfsadfsdfsds|
|--------------------------|
http://jsfiddle.net/tmqCR/
A few of these responses have what you need. I think this has everything together though.
The HTML:
<div class="container">
<div class="url">
URL:
</div>
<div class="text">
Lorem Ipsum dolor
Lorem Ipsum dolor
Lorem Ipsum dolor
Lorem Ipsum dolor
</div>
<div class="clear"></div>
</div>
The CSS:
.url {
float:left;
width:60px;
}
.text {
float:left;
width:200px;
}
.clear {
clear:both;
}
Check out this fiddle http://jsfiddle.net/FEZaJ/
The URL - Float it left;
The media element. Really breaks down to float: left; on the first element and overflow hidden on the second.
Hi i m created this like one.
Css
.url {
float: left;
width: 75px;
background:pink;
}
.description{
float: left;
width: 175px;
word-wrap: break-word;
text-align:justify;
background:lightgreen;
}
HTML
<div class="url">URL:</div>
<div class="description">thissdfsisalongurasdsdfreaallyyyyyyyyyyylongggggggggsdddfasdfsdfasdfsadfsdfsds</div>
Live demo Click here http://jsfiddle.net/rohitazad/tmqCR/25/
How would I go about adding a comment section under each photo in this gallery?
(You can view an image of what I'm hoping to do here: - won't let me post a link because i'm a new member.... zhttp://www.some-things.net/storage/Picture109.p ng )
I know the iframe may not be the best way to be working this - but my friend wanted a sideways scroll area with wordpress integration and I couldn't find any suitable gallery plugins.
The images are displayed in a ul/ li - but because it's display-inline it won't let me put in another div below each image.
http://www.some-things.net/storage/anna/wordpress/?page_id=49
Basically I want to create a section under each picture that contains room for comment if needed - something like the picture above.
Any tips on the code needed would be great!
Put the image and the content in a div, and float all these divs to the left. use inline-block as display and whitespace: no-wrap.
<html>
<head>
<style type="text/css">
#container {
white-space: nowrap;
}
.image {
display: inline-block;
width: 150px;
}
.comment {
display: block;
white-space: normal;
}
</style>
<div id="container"><p>
<div class="image">
<div style="height: 200px; width: 150px; background: gold;"></div>
<div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
</div>
<div class="image">
<div style="height: 200px; width: 150px; background: gold;"></div>
<div class="comment">Bla bla bla lorum ipsum doler amet amor etc. etc.</div>
</div>
...
...
</p></div>