I have a div with positons fixed inside a fixed width parent, yet it's content overflows.
How can I contain the content to the fixed div?
<div style="width: 400px;">
<div style="position: fixed;">
<p>Some long p text which is currently overflowing....</p>
</div>
</div>
You won't see a good result setting the position to fixed. Because the div that is inside the parent is position fixed, and it's not true. It's not like position relative and absolute.
You can fix it like this:
You must set a fixed width, e.g. the parent is 200px and so you have to set the width to 200px on the second div. Remember that if you set it to 100%, it will cover the whole page, which is a mistake.
<div style="width: 200px; height: 200px; border: 1px solid red">
<div style="position: fixed; width: 200px;">
<p>Some long p text which is currently overflowing....</p>
</div>
</div>
Here are some overflow properties this will help you
div{
overflow: scroll;
}
div{
overflow: hidden;
}
div{
overflow: auto;
}
div{
overflow: visible;
}
Maybe this code will help you check
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
</style>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</body>
</html>
Verifiy my answer if this help you.
Related
My slick slider images are covering up the elements that are supposed to sit below, and I'm not sure why. I need #features to sit below #slideshow, but right now it's covered up. I'm not sure what's making the slider overlap the elements below it on the page. I don't want to just "push" the #features div down with CSS, like by using bottom: -50px or whatever because I'm aiming for responsive design. I need the slideshow slider and slides to take up the same amount of height that the images do. Hopefully this makes sense! Here's my code:
HTML:
<div id="slideshow">
<div class="slide"><img src="images/Need Space.jpg"></div>
<div class="slide"><img src="images/Open Lot.jpg"></div>
<div class="slide"><img src="images/IMG_0713a.jpg"></div>
<div class="slide"><img src="images/IMG_0714a.jpg"></div>
</div>
<div id="features" class="flex">
<div>Safe</div>
<div>Secure</div>
<div>24-Hour Access</div>
</div>
<div id="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
CSS:
/* SLIDESHOW */
#slideshow {
width: 100%;
height: 50vh;
margin-bottom: 5vh;
}
.slide {
width: 100%;
height: 100%;
}
.slide img {
width: 100%;
}
.slick-initialized .slick-track {
display: flex;
align-items: center;
}
/* FEATURES */
#features div {
margin: 5vw;
padding-bottom: .5vh;
font-weight: bolder;
font-size: 2.5vh;
letter-spacing: .25vw;
border-bottom: 1px solid white;
}
I have found 2 issues -
Instead of height: 50vh, use height: 50%. (Reference line- 19). This will solve your problem.
Wrap all slide pictures with a parent div. Let name it - class='slick' (reference line- 53). This .slick class will Iterate it's all pictures. If your slider operates perfectly, you don't have to do this part.
I have attached the code below-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
/* SLIDESHOW */
#slideshow {
width: 100%;
height: 50%;
margin-bottom: 5vh;
}
.slide {
width: 100%;
height: 100%;
}
.slide img {
width: 100%;
}
.slick-initialized .slick-track {
display: flex;
align-items: center;
}
/* FEATURES */
#features div {
margin: 5vw;
padding-bottom: .5vh;
font-weight: bolder;
font-size: 2.5vh;
letter-spacing: .25vw;
border-bottom: 1px solid white;
}
</style>
</head>
<body>
<div id="slideshow">
<div class="slick">
<div class="slide"><img src="https://dummyimage.com/vga"></div>
<div class="slide"><img src="https://dummyimage.com/vga"></div>
<div class="slide"><img src="https://dummyimage.com/vga"></div>
<div class="slide"><img src="https://dummyimage.com/vga"></div>
</div>
</div>
<div id="features" class="flex">
<div>Safe</div>
<div>Secure</div>
<div>24-Hour Access</div>
</div>
<div id="description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 500, // autoplaySpeed: 1000, or autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplay: true,
autoplaySpeed: 8000,
dots: true,
});
});
</script>
</body>
</html>
When I try to view my page on a mobile device specifically Chrome browser (not Firefox) I get white space under the container. Below is the code. It seems to happen when I have wide content in the main element.
http://demo.microcad.ca/web/test/test.html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html { height: 100%; }
body { min-height: 100%; margin: 0;}
.container {
display: grid;
grid-template-rows: 50px;
grid-template-columns: 250px;
grid-template-areas:
"aside header"
"aside main";
height: 100vh;
}
aside {
grid-area: aside;
background: #2f313a;
}
header {
grid-area: header;
background: #fff;
}
main {
grid-area: main;
background: #ebedf3;
}
</style>
<head>
<body>
<div class="container">
<aside>aside</aside>
<header>header</header>
<main>main
<table>
<tr>
<th>Age</th><th>Height</th><th>Registration</th><th>Logged In</th>
</tr>
<tr>
<td>t, consectetur adipiscing elit. Morbi neque orci, auct</td><td>t, consectetur adipiscing elit. Morbi neque orci, auct</td><td>t, consectetur adipiscing elit. Morbi neque orci, auct</td><td>t, consectetur adipiscing elit. Morbi neque orci, auct</td>
</tr>
</table>
</main>
</div>
</body>
</html>
It's a table related issue, table being a table it has to stay in view and keep it's aspect ratio, so a simple solution is to make it's container scroll.
main {
grid-area: main;
background: #ebedf3;
overflow-x: auto;
}
Or you can remove this line so the viewport isn't calculated based on the screen size.
<meta name="viewport" content="width=device-width, initial-scale=1">
Not recommended.
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.
I have some CSS code with a header, footer, left menu pane, and content. The layout is working on all browsers except IE6. In IE6 the linksPanel div does not render correctly within the masterContent div. I believe it has something to do with the position element. I've looked at a bunch of articles but have not been able to find a solution that works. Unfortunately I have to support IE6 and need a solution. Code is below. Any help would be greatly appreciated!
<!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 runat="server">
<title></title>
<style type="text/css">
.masterContent
{
position:fixed;
top:178px;
bottom:42px;
left:0px;
right:0px;
overflow:auto;
background:#fff;
}
.linksPanel
{
position:absolute;
top:0px;
left:10px;
bottom:0px;
width:254px;
overflow:auto;
background:#f4f4f3;
line-height:20px;
padding:5px;
}
.mainPanel
{
position:absolute;
top:5px;
bottom:0px;
right:10px;
width:70%;
overflow:auto;
padding-left:10px;
padding-bottom:0px;
}
.footerPanel
{
position:absolute;
bottom:0px;
left:0px;
padding:0px;
margin:0px;
width:100%;
height:44px;
text-align:right;
overflow:hidden;
background:#f4f4f3;
z-index:100;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div class="headerPanel">
<p>Header stuff here.</p>
<p>More header stuff here.</p>
</div>
</td>
</tr>
</table>
<div class="masterContent">
<div class="linksPanel">
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
</div>
<div class="mainPanel">
<p>test content</p>
<p>test more content</p>
<p>test</p>
<p>test</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="footerPanel">
<p>Footer stuff here.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
This is a very strange design and I have seen some strange designs indeed.
You are putting everthing in a <form> element and by everything, I mean everything including the header, div#masterContent and footer.
Than you are using tables and I have no idea why. Everying that you have done with tables can be done with divs.
You are giving you div.masterContent a position:fixed with a top:178px and bottom: 42px. Are you familiar with the positioning concepts in CSS? When you give any element a position of fixed, that element remains on the screen regardless if you scroll down. Is that what you want, and if you do, I can not imagine what kind of a page it will be.
You are giving your div.linksPanel a position of absolute with a top: 0, bottom: 0 and left: 10px. As i said this does not make sense in any way. How can it be 0 from the top as well as 0 from the bottom. These offset properties are set by using top-left, top-right or bottom-left, bottom-right.
Your div.mainPanel has the same issues.
I think, either you have totally missunderstood CSS Positioning and Layouts, or I have utterly failed to understand it. Maybe this is what you are looking for.
<!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" lang="en" xml:lang="en" dir="ltr">
<head runat="server">
<title>Document Template</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="basic.css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<p>Header Stuff Here</p>
<p>More Header Stuff Here</p>
</div>
<div id="content">
<div id="links_panel">
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
</div>
<div id="main_panel">
<p>test content</p>
<p>test more content</p>
<p>test</p>
<p>test</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem
</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<br />
</div>
<div id="footer_panel">
<p>Footer stuff here.</p>
</div>
</form>
</div>
With the following CSS
/* START - BASIC CSS */
/* START - CSS Reset */
*
{
margin: 0;
padding: 0;
}
p
{
line-height: 20px;
margin: 20px 0;
}
/* END - CSS Reset */
/* START - div wrapper */
div#wrapper
{
margin: 0 auto;
width: 960px;
border: 1px solid black;
}
/* END - div wrapper */
/* START - hack for "margin: auto" for IE6*/
body
{
text-align: center;
}
div#wrapper
{
text-align: left;
}
/* END - hack for "margin: auto" for IE6*/
/* START - form form1 */
form#form1
{
}
/* END - form form1 */
/* START - div header */
div#header
{
border: 1px solid black;
}
/* END - div header */
/* START - div content */
div#content
{
border: 1px solid black;
height: 500px;
}
/* END - div content */
/* START - div links_panel */
div#links_panel
{
width: 250px;
float: left;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div links_panel */
/* START - div main_panel */
div#main_panel
{
width: 704px;
float: right;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div main_panel */
/* START - div footer_panel */
div#footer_panel
{
clear: both;
border: 1px solid black;
}
/* END - div main_panel */
/* END - BASIC CSS */
Basically you want a header, followed by a linkspanel on the left which should have a scroolbar, followed by a mainPanel which should also have a scroolbar and it has to be to the right of the linksPanle and lastly followed by a fotter.
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>