Im creating a website where the header, footer, body are all 100% width of the page, but I need all the content to be centered of the page no matter the resolution. I've tried using a wrapper but then the header and stuff are only 100% width of the wrapper and not the page.
I'm going out on a limb and guess that the background color/imagery is 100% wide, but you want the actual content to be centered (with a fixed width?). Here is sample code that uses an internal wrapper div on each item to keep internal content centered. I would recommend doing something totally different and possibly using repeating backgrounds on the html and body elements, but I don't know what your page looks like.
So.., the following will work, but will alarm HTML purists because of the extra markup :)
You can view a (super ugly) example of this method on this sample page I put together.
CSS:
.wrapper {
width: 960px; /* fixed width */
margin: 0 auto; /* center */
}
HTML:
<div id="header">
<div class="wrapper">
<h1>My Title</h1>
</div>
</div>
<div id="content">
<div class="wrapper">
<h2>Sub Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div id="footer">
<div class="wrapper">
<p class="credits">Copyright 2009 by Your Company.com, LLC</p>
</div>
</div>
you can't do this with a div element unless it has a specified width.
for just text, you can use
<div style="text-align: center;">text content</div>
this should work for you:
The CSS:
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
margin: 20px 140px 20px 140px;
text-align: center;
}
#content {
width: 100%;
padding: 0px;
text-align: left;
background-color: #fff;
overflow: auto;
}
The HTML:
<body>
<div id="content">
<p><b>center</b><br /><br />
This BOX ist centered and adjusts itself to the browser window.<br />
The height ajusts itself to the content.<br />
</div>
</body>
This example was taken from this site, which I found a while ago and always refer to it for nice simple, clean css templates:
http://www.mycelly.com/
Have a play with this
body {
text-align: center;
position: relative;
}
#content {
width: 100%;
height: auto;
position: relative;
margin-left: auto;
margin-right: auto;
}
Then in the HTML
<html>
<body>
<div id="header"></div>
<div id="content">
<!-- place all of your content inside of here -->
</div>
</body>
</html>
Related
I have a simple flex container with three flex items in. One is a bulleted list, the second is a piece of text and the third is an image with a caption. I have set the flex container .aside as the flex container by adding display: flex and was hoping that the items would display evenly as default. But the bulleted list is very narrow and extends over the left hand side of the flex container, the middle piece of text is very wide, and the image and its caption is about right. I know I'm missing something simple - what settings do I need to apply to distribute them evenly.
I've tried using justify-content on the flex container and it didn't have any affect.
Here's the html
.container2 {
width: 80%;
max-width: 1150px;
margin: 0 auto;
}
.aside {
display: flex;
justify-content: center;
}
.aside-image {
width: 100%;
margin-top: 1em;
}
figure {
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
}
.aside-left,
.aside-center {
margin-right: 1em;
}
<div class="container2">
<div class="aside">
<aside class="aside-left">
<h3>Top 5 articles</h3>
<ul>
<li><a class="hover-a" href="articles/article.html">Climate march</a></li>
<li><a class="hover-a" href="articles/article.html">Walthamstow mattresses</a></li>
<li><a class="hover-a" href="articles/article-dog-track.html">Plight of the dog track</a></li>
<li><a class="hover-a" href="articles/article.html">The old cinema</a></li>
<li><a class="hover-a" href="articles/article.html">Bus route changes</a></li>
</ul>
</aside>
<aside class="aside-center">
<h3>Comment</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</aside>
<aside class="aside-right">
<figure>
<img class="aside-image" src="images/grayson-perry.jpg">
<figcaption>I've moved out just as Walthamstow is becoming gentrified. My work is done.</figcaption>
</figure>
<cite>- Graysen Perry</cite>
</aside>
</div>
<!-- aside-->
</div>
<!-- container-->
I would expect the flex items to distribute evenly, instead of having a wide central box and smaller outside boxes. I would also expect the flex items to stay within the container.
Try this
.aside aside{
width: 100%:
}
plus
figure{
margin: 0;
}
ul{
padding-left: 16px;
}
How can make an element sticky, so it stays at the top of the viewport? I want the element to remain sticky even if it leaves it's container.
I tried this
HTML
<div class="page">
<div class="parent">
<div class="child-sticky">
<p>i want to be sticky, even when I'm outside my parent.</p>
</div>
</div>
</div>
CSS
.child-sticky {
position:sticky;
top:20px;
}
.page {
height: 3000px;
}
Here's a pen to illustrate the problem. Scroll down to see what I mean.
https://codepen.io/pwkip/pen/OxeMao
Sticky works that way, it will remain sticky relative to its parent. You need to use fixed.
Check this codepen
Already 7 months ago, but I found a CSS only solution if the element you want to be sticky is the last one of its parent, its very simple: Just give the parent element position: sticky; and also give it top: -xx;, depending on the height of the elements before the last one.
#parent {
position: -webkit-sticky;
position: sticky;
top: -3em;
}
#some_content {
height: 3em;
}
#sticky {
background-color: red;
}
#space {
height: 200vh;
}
<div id="parent">
<div id="some_content">Some Content</div>
<div id="sticky">Sticky div</div>
</div>
<div id="space"></div>
<p>Scroll here</p>
This is how position: sticky is intended to work. If you need it to also work outside the parent than you have to change the HTML structure.
See also the official definition: https://www.w3.org/TR/css-position-3/#sticky-pos
There is a little trick you can try.
In some cases it will break your layout and in others it won't. In my case, I have a header with some buttons but when I scroll down, I want to have access to some action buttons which are inside that one-line header. The only change is to set the display property of your parent to be inline.
.parent {
display: inline;
}
Based on https://stackoverflow.com/a/46913147/2603230 and https://stackoverflow.com/a/37797978/2603230's code, here's an combined solution that does not require hard-coded height.
$(document).ready(function() {
// Get the current top location of the nav bar.
var stickyNavTop = $('nav').offset().top;
// Set the header's height to its current height in CSS
// If we don't do this, the content will jump suddenly when passing through stickyNavTop.
$('header').height($('header').height());
$(window).scroll(function(){
if ($(window).scrollTop() >= stickyNavTop) {
$('nav').addClass('fixed-header');
} else {
$('nav').removeClass('fixed-header');
}
});
});
body { margin: 0px; padding: 0px; }
nav {
width: 100%;
background-color: red;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div>
<h1 style="padding-bottom: 50px; background-color: blue;">
Hello World!
</h1>
</div>
<nav>
A nav bar here!
</nav>
</header>
<main style="height: 1000px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</main>
Like mentioned, sticky works that way. However there is a CSS hack that you can play around with.
Disclaimer
This is an ugly hack and will probably create a lot of problems with the following content. So I would not recommend it for most usecases. Having that said...
Negative margin hack
There is a hack you could play around with including negative margin. If you extend the height of the container and then give it some negative bottom margin, it could at least "visually leave" the container.
I altered your code and created a JSFiddle for demonstration.
HTML
<div class="page">
<div class="parent">
<div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
<div class="child-sticky">
<p>i want to be sticky, even when I'm outside my parent.</p>
</div>
<div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
<div class="child"><p>...<br>...<br>...<br>...<br>...</p></div>
</div>
<div class="following-content">
</div>
</div>
CSS
.child-sticky {
height: 200px;
background: #333366;
position:sticky;
top:20px;
color:#ffffff;
}
.parent {
height: 1250px;
background: #555599;
margin-bottom: -500px;
}
.following-content {
background: red;
height:500px;
}
.child {
background-color: #8888bb;
}
.page {
height: 3000px;
background: #999999;
width: 500px;
margin: 0 auto;
}
div {
padding: 20px;
}
https://jsfiddle.net/74pkgd9h/
See the jsFiddle here: http://jsfiddle.net/9apNs/
I am trying to display a series of items in a listview in JQM. I am customizing it with certain behavior on taps/clicks.
What I am trying to do now should be quite simple - align an image on the left and a few chunks of text on the right. I've got it working using %ages for width, but I would much prefer that the text was immediately adjacent to the image, no matter the image size or how much the screen expands or shrinks. Images will be fairly small (~50 pixels in width and height).
It makes more sense if you look at it on jsFiddle (to see it in context with rest of JQM listview), but here is the code:
<li>
<div class="entire">
<div class="date">23 November 2013</div>
<div class="image">
<img src="http://vogelsangpeststl.com/wp-content/uploads/2013/02/House_mouse-50x50.jpg"/>
</div>
<div class="text">
<div class="first">ID - Short</div>
<div class="second">
Slightly-longer ID - may possibly be two lines.
</div>
<div class="notes">
Notes could really be quite a lot of text. Usually just a line or two,
but could be quite long. In that case, want to keep image on left and have
text fill up the rest of the space
</div>
</div>
</div>
</li>
And here's the css
.entire {
position: relative;
width: 100%;
border: 1px solid red;
}
.text {
display: inline-block;
vertical-align: middle;
width: 70%;
border: 1px solid blue;
}
.image {
display: inline-block;
vertical-align: middle;
width: 25%;
height: 100%;
border: 1px solid green;
}
.first {
font-weight: bold;
font-size: larger;
}
.date {
position: absolute;
right: 0px;
}
.second{
font-weight: normal;
}
.notes{
font-style: italic;
font-size: smaller;
}
The <div class="image"> is unnecessary. Take the <img> tag out of its container and float all elements inside the .entire container. I also recommend you change your first, second and notes div to h3, h4 and p tags respectively. this is semantically a better way to code, improving readability and SEO of the page.
HTML
<ul class='slats'>
<li class="entire">
<img src='http://placekitten.com/80/80' />
<h3>sub heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</li>
...
CSS
li{ clear:left; margin-top:1em;}
img{float:left;}
.text{float:left;}
I'm trying to center a Div that will have varying width's (based on content of a website).
I read about a relative positioning technique here:
http://www.tightcss.com/centering/center_variable_width.htm
But I thought there has to be an easier way to do it?
That's a pretty solid method that should work well in most browsers. It's not really that complex when you break it down. Here's a basic example:
<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>
<div id="hideoverflow">
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo libero, commodo ut iaculis in, placerat vel purus.
</div>
</div>
</div>
#Talon; you can do it like this http://jsfiddle.net/sandeep/7PXQF/
CSS:
.container{
background-color:red;
text-align:center;
}
.center{
background-color:yellow;
display:inline-block;
text-align:left;}
HTML:
<div class="container">
<div class="center">
<p>This is a div with an much wider width, to make the yellow div go off the page to the right. We'll type a bit more to be sure.</p>
<p>Most people will see a horizontal scroll bar on the bottom, unless their screen is very wide.</p>
</div>
</div>
Well, it can't get any simpler than this and has full support on all browsers; doesn't even need a container:
.centered {
display:table;
margin:0 auto;
}
<div class="centered">
content
</div>
Here is a working fiddle: https://jsfiddle.net/1tnprnoz/
Now with flex-box you can easily achieve this with justify-content: center;.
#container{
background: gray;
display: flex;
justify-content: center;
}
<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>
This can also be achieved by applying margin: auto to the containers child selector #container>*.
#container{
background: #c7c7c7;
}
#container>*{
margin: auto;
}
<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>
Note: content div is styled inline as these styles are generated styles and are out of the scope of this question.
------------------------
h1
tab1 tab2 tab3
------------------------
text text | photo
text text | photo
text text | photo
text text | photo
text text | photo
text text |
text text text text text
text text text text text
In the above two column layout the text is floating around the right panel. This is easily achieved by right floating the right column, however this requires that the right column and its images are placed before the left column and the text in the html.
Given the possibility (who knows really but I'm not up for taking a chance) of losing page rank due to text content being lower down the page, how can I achieve the same result with the left column before the right in the html?
Related question on webmasters
I read in that referenced thread that these images are a slideshow, does that mean you know the width and height of the right "floated" block?
IF so the following fiddle example may be an option, if not I don't think it's possible without keeping the images first in source.
IF so, it means inserting one empty div first in source, dimensioning it to match the images/slideshow area and floating it right for a "placeholder".. then add position relative to your main content area, and absolutely position the actual images/slideshow over the placeholder:
example fiddle : HERE
full code as per comments :
HTML:
<div id="wrapper">
<div id="header"><h1>Header</h1></div>
<div id="tabs">Tabs</div>
<div id="main">
<div id="ssholder"></div>
<div id="left">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<p> add loads more content!</p>
</div>
<div id="sshow">
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
<img src="" alt="" width="200px" height="50px" />
</div>
</div>
</div>
CSS:
#wrapper {
width: 600px;
border: 1px solid #000;
}
#main {
position: relative;
border: 1px solid red;
}
#ssholder {
float: right;
width: 200px;
height: 300px;
}
#sshow {
position: absolute;
width: 200px;
height: 300px;
top: 0;
right: 0;
background: #eee;
}
#sshow img {
display: block;
}
jQuery to detect heights if not explicitly set on #sshow:
$(function() {
var sshowHeight = $('#sshow').height();
$('#ssholder').height(sshowHeight);
});
This works from IE6 on. Float it left and set width to it. Your sidebar part gets margin-left that has to be same ammount as total width of floated part (take care with margins, borders and paddings as they count to total width too).
JSfiddle: http://jsfiddle.net/easwee/reXaT/1/
<!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">
<head>
<title></title>
<style type="text/css">
.content {width:800px;margin:0 auto;background:#ccc;}
.content-text {float:left;width:500px;background:green;}
.content-sidebar {margin-left:500px;background:red;}
.clear {clear:both;height:1px;line-height:1px;font-size:1px;}
</style>
</head>
<body>
<div class="content">
<h1>Winrar text</h1>
<div class="content-text">
Texte
</div>
<div class="content-sidebar">
asdfasdf
</div>
<div class="clear"></div>
</div>
</body>
</html>
Updated:
I moved the image div after the text div. If the size of the image is dynamic you can use jQuery to set it dynamically
jsFiddle link
If you don't know the width and height of your image element
Having text content wrap around an element can only be done using float, and since the width and height of your images are not known in advance we'll have to use javascript. I think the easiest way would be to:
Serve the HTML with the text before the image.
Using Javascript move the image before the text.
Use a simple float: right; to position the image.
This way you wont lose page rank (search engine will see the proper HTML) and users will have the desired layout.
The javascript would be as simple as
var image = document.bodocument.getElementById('imageContainer')
var text = document.getElementById('textContainer')
text.parentNode.insertBefore(image, text)
If width and height are always the same
We can fake it using CSS pretty easily by using a pseudo-element
#wrapper{
position: relative;
}
#textContainer:before {
content: '';
display: block;
width: 200px;
height: 200px;
float: right;
margin: 0 0 1em 1em;
}
#imageContainer{
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
}
Here we create a fake 200x200 element before the textContainer and use it to save space for the imageContainer we put over using absolute positioning. For the absolute positioning to work you'll need a wrapper div around your textContainer and ImageContainer with position: relative;
Why not write your html in such a way that all the text occurs before all the images.
Something like :
<div id="MainWrapper">
<div id="LeftFloatedText">
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<div>
<div id="LeftFloatedImages">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
<img src="http://placekitten.com/150/150">
</div>
</div>