I have two absolute positioned child divs inside a relative positioned div. I am having troubles making the two absolute positioned child divs expandable without overlapping each other. I've tried a variety of different ways already. I also looked at this position absolute but resize parent but I need my child divs to be absolute positioned not relative.
Also this is for mobile to tablet sized browsing so all width's are already 100%.
Edit: I only need .child2 to be expandable in height because .child1 is an image and it will always be 200px in height.
My Sample Code:
<div class="parent">
<div class="child1">
<h2>Client</h2>
<h4>Client Name</h4>
</div>
<div class="child2">
<img src="imageurl" />
</div>
</div>
<div class="parent">
<div class="child2">
<img src="imageurl" />
</div>
<div class="child1">
<h2>Skills</h2>
<h4>Skill Utilized</h4>
</div>
</div>
<div class="parent">
<div class="child1">
<h2>Project URL</h2>
<h4>Link to Project</h4>
</div>
<div class="child2">
<img src="imageurl" />
</div>
</div>
My Sample CSS:
.parent {
position: relative;
width: 100%;
height: auto;
}
.child1 {
position: absolute;
top: 50px;
width: 100%;
height: 200px;
}
.child2 {
position: absolute;
top: 250px;
width: 100%;
height: auto;
}
You can set a max-height for both divs or use Javascript to detect if the sum of the div heights is bigger than the parent div's height.
You need to give the parent a height otherwise the code doesnt realize what is top position and what is bottom position.
CSS
.parent {
position: relative;
width: 100%;
height: 300px;
}
.child1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.child2 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
I think youre going to have to look into another option besides html and css to solve this. Using css position will take its applied element outside of the normal markup flow. Using position:relative on an element doesnt take into consideration any positioning you may have applied to other elements. You have position relative on multiple elements, but dont actually call out where or what you want them positioned relative to, hence why they stack.
If youre trying to create a completely dynamic and responsive site that will resize to any tablet and mobile resolution, perhaps look into using the meta tag "viewport".
This is an example:
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum=-scale=1.0, initial-scale=1.0" />
<title>Responsive Web Design</title>
<link rel="stylesheet" type="text/css" href="css/screenStyles.css" />
<link rel="stylesheet" type="text/css" href="css/screenLayoutLarge.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/screenLayoutSmall.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/screenLayoutMedium.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
Using the viewport meta tag allows you to call out min-max widths and then reference different style sheets to be used with different screen resolutions.
Related
I'm having an issue, primarily on mobile devices (in my case, an iOS device) where a div is seemingly preventing scroll-chaining; this is problematic because it's the first place you would touch to scroll (as opposed to a smaller div above it). Similarly for scrolling back up. I couldn't find anything online stating that there was a parameter or property default to mobile webkit that would contain a div. It seems though maybe this is behavior on iOS webkit, as notably, a second swipe on the final image after the "bounce" of the scroll of the div returns to normal positioning in the div allows a scroll (sometimes seemingly inconsistently?)
I've managed to recreate the issue with a test with minimum code repeated from my project (view on mobile! overscroll works fine on desktop)
https://codepen.io/hennigarj/pen/ZEjYrpW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<style>
#container {
display: block;
width: 100%;
height: 100%;
padding-top: 4vh;
}
.flex-items {
width: 100%;
overflow: auto;
}
.flex-items:nth-child(1) {
display: block;
height: 10vh;
}
.flex-items:nth-child(2) {
display: block;
margin-top: 4vh;
margin-bottom: 4vh;
height: 64vh;
text-align: center;
}
.flex-items img {
max-width: 100%;
}
.flex-items:nth-child(3) {
display: block;
padding-bottom: 6vh;
}
</style>
</head>
<body>
<div id="container">
<div class="flex-items">
Div 1
</div>
<div class="flex-items">
<section id="highlights">
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
<div class="highlight">
<img src="https://placehold.jp/400x536.png" />
</div>
</section>
</div>
<div class="flex-items">
Div 3
</div>
</div>
</body>
</html>
Anyone have any ideas? I've tried all sorts of overflows and overscroll-behaviors on everything but nothing seems to fix this, and there is no value to specifically enable scroll-chaining through overscroll.
This is probably clear as day and I'm completely missing it.
Thank you :)
I've tried various different potential heights, overscroll-behaviors, overflows on divs (to no success). Ideally, hitting the end of the div would continue the scroll-chain past it, just as it does on desktop, but it contains. I've tried -webkit-overflow-scroling: auto as well.
I am writing my own css, but the strange thing is that the my .content border-top and border-bottom are sticking together.
Here is my code for css:
body{
width: 100%;
margin: auto;
}
header{
position: relative;
margin: 20px;
min-width: 1200px;
min-height: 70px;
}
p{
font-family: courier;
font-size: 130%;
margin: 10%;
}
.content{
margin-top: 100px;
min-width: 1200px;
border-top: 3px solid orange;
border-bottom: 30px solid rgb(239, 98, 98);
}
.content .col-left{
width: 20%;
float: left;
}
.content .col-mid{
width: 60%;
float: left;
}
.content .col-right{
width: 20%;
float: left;
}
.footer{
margin-top: 20px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>IEEI</title>
<!-- Custom styles for this template -->
<link href="css/reset.css" rel="stylesheet">
<link href="css/customized.css" rel="stylesheet">
</head>
<body>
<header>
<img src="http://via.placeholder.com/150x150">
</header>
<div class="content">
<div class="col-left"><img src="http://via.placeholder.com/100x150" style="width:100%"></div>
<div class="col-mid">
<p>
Instead of referencing the image directly, stick it within a DIV.
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
</p>
</div>
<div class="col-right"><img src="http://via.placeholder.com/100x150" style="width:100%"></div>
</div>
<div class="content">
<p>test footer</p>
</div>
<div class="footer">
<p>test footer</p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I am wondering how to move the red border bottom to the right position.
I have tried to put a new content box in the HTML, the position seems to be OK but messes up the output. I am new to the CSS, please help me out.
Your .content element only contains floated elements, which "don't count" concerning the borders and size of their container element. Add overflow: auto; to .content to make .content wrap its floating contents:
body{
width: 100%;
margin: auto;
}
header{
position: relative;
margin: 20px;
min-width: 1200px;
min-height: 70px;
}
p{
font-family: courier;
font-size: 130%;
margin: 10%;
}
.content{
margin-top: 100px;
min-width: 1200px;
border-top: 3px solid orange;
border-bottom: 30px solid rgb(239, 98, 98);
overflow: auto;
}
.content .col-left{
width: 20%;
float: left;
}
.content .col-mid{
width: 60%;
float: left;
}
.content .col-right{
width: 20%;
float: left;
}
.footer{
margin-top: 20px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>IEEI</title>
<!-- Custom styles for this template -->
<link href="css/reset.css" rel="stylesheet">
<link href="css/customized.css" rel="stylesheet">
</head>
<body>
<header>
<img src="http://via.placeholder.com/150x150">
</header>
<div class="content">
<div class="col-left"><img src="http://via.placeholder.com/100x150" style="width:100%"></div>
<div class="col-mid">
<p>
Instead of referencing the image directly, stick it within a DIV.
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
Instead of referencing the image directly, stick it within a DIV
</p>
</div>
<div class="col-right"><img src="http://via.placeholder.com/100x150" style="width:100%"></div>
</div>
<div class="content">
<p>test footer</p>
</div>
<div class="footer">
<p>test footer</p>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Also would be a good idea to provide some height to the element of .content ID.
I am unable to center the footer on the page. All content is centered on the page and set to 1280px, so it does not take up the entire width of the page. The issue is that everything on the page is centered except the footer. It is the correct width, but the footer is pushed hard left. Any ideas what I am missing?
This is what the footer looks like currently:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../Css/Style.css">
<link rel="icon" type="png" href="../Pictures/Icon.png">
<meta charset="utf-8"/>
<meta name="description" content="xxx">
<meta name="keywords" content="xxx">
<meta name="author" content="xxx">
<title>xxx</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>xxx</h1>
<h2>xxx</h2>
</div>
<div>
<hr/>
</div>
<div id="menu">
<ul>
<li class="menuitem">Home</li>
<li class="menuitem">Manage Income</li>
<li class="menuitem">Manage Bills</li>
<li class="menuitem">View Calendar</li>
</ul>
<a id="signout" href="SignOut.html">Signout</a>
</div>
<div class="pie"></div>
</div>
</body>
<footer>
<a id="contact" href="xxx.html">Contact Us</a>
</footer>
</html>
footer{
display: block;
width: 1280px;
height: 35px;
text-align: center;
bottom: 0px;
position: fixed;
float: none;
margin: auto;
background-color: #B6B6B4;
}
Your example code appears to align correctly for me.
Note that your width of 1280px means that the text will be centered at exactly 640px (half of 1280px), and this is likely outside of your viewport at smaller widths, meaning it will seem as though your text is not central.
To remedy this, use a percentage-based width instead, such as 100% to indicate that your footer should occupy the full width available:
footer {
display: block;
width: 100%;
height: 35px;
text-align: center;
bottom: 0px;
position: fixed;
float: none;
margin: auto;
background-color: #B6B6B4;
}
<footer>
Test
</footer>
As you can see in the above example, the text is visible even though the viewport is narrow.
Note that it's also possible that your footer's CSS is being overridden by a selector with higher specificity. You can use the F12 Debugger to ensure that your rules are being applied correctly.
Hope this helps! :)
I have a parent DIV with a child DIV that I'd like to have stretch to the bottom of the parent. At present it does not despite having height:auto!important; A screenshot illustrating the issue can be seen here.
The relevant HTML (as a Jade template) is as follows:
.main.top0
.infoPanel.koneksa_bg_blue
.innerPanel.mtop0.mbottom0
.infoCaption.font8em.koneksa_white 404
.infoCaption.koneksa_white We can't find the page you are looking for
.infoCaption.koneksa_white
| Don't worry. Just try to go back or
a.koneksa_white.underline(href='/') home
.footer.stickyBottom.koneksa_bg_gray.koneksa_fg_light_gray
The main DIV is the parent and the infoPanel is the child (colored in blue in the image above) that I am struggling to stretch.
The corresponding CSS is as follows:
.main {
width:100%;
min-height:700px;
height:auto!important;
overflow: hidden;
z-index: 1;
top:3em;
position: relative;
}
.infoPanel {
width:100%;
height:auto!important;
display: block;
padding:0;
}
.innerPanel {
width:90%;
padding:40px 0;
height:auto!important;
margin:0 5%;
display: block;
}
I'm aware that this is a fairly common question but it seems like the answer is always to include a hard-coded height. I would like to avoid this because while that was a perfectly fine solution for the desktop styling this is intended to be displayed on mobile devices and as such I'd like it to be a bit more responsive than a hard-coded height.
Thanks for any insights that you can provide.
EDIT:
The generated HTML as requested:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html"></html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 0.8, user-scalable = yes">
// Imports removed
<link href="/assets/css/mvp.css" type="text/css" rel="stylesheet" media="screen and (max-width: 768px)">
<link href="/assets/css/mvp_wide.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px)">
</head>
<body class="tk-futura-pt koneksa_gray">
<div class="fullNav koneksa_bg_white boxShadow">
<div class="centerPanel">
<div class="mleft2 left khmoniker"></div>
<div class="menu right">customer login</div>
</div>
</div>
<div class="main top0">
<div class="infoPanel koneksa_bg_blue">
<div class="innerPanel mtop0 mbottom0">
<div class="infoCaption font8em koneksa_white">404</div>
<div class="infoCaption koneksa_white">We can't find the page you are looking for</div>
<div class="infoCaption koneksa_white">Don't worry. Just try to go back or home</div>
</div>
</div>
<div class="footer stickyBottom koneksa_bg_gray koneksa_fg_light_gray">
<div class="innerPanel">
<div class="caption left">
<h5 class="konekea_blue_gray mtop2">© template-filler</h5>
<div class="kh_reverse_logo mtop2"></div>
</div>
<div class="caption right">TermsPrivacyCorporate</div>
</div>
</div>
</div>
</body>
One solution that works in all modern browsers is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 3em;
bottom: 0;
width: 100%;
}
This seems an unusual solution but modern browsers will actually respect all 4 sides being defined at the same time and stretch the element to match. Here is an example jsFiddle: http://jsfiddle.net/nqt7vqs1/2/
You can do the same with all child elements as well because position: absolute implies position: relative for the purposes of positioning child elements.
If this solution doesn't work, another option is to do the following:
html, body {
height: 100%
}
.main {
position: absolute;
top: 0;
height: 100%;
margin: 3em 0 -3em 0;
overflow: hidden;
}
This is a "hidden margin" trick that also works in all modern browsers. Same Fiddle with these settings: http://jsfiddle.net/nqt7vqs1/3/
I am needing to center my image using css. I am having troubles, and cannot find out how to do it.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<title>
AG.
</title>
<body>
<img src="images/logo.png" alt="AG" class="logo">
</body>
</html>
CSS
.logo {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
}
You can't center an inline element that way - you need to give it a display: block style:
.logo {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
display: block;
}
<img src="http://placehold.it/500/467" alt="AG" class="logo">
To wrap the image into a div,
change the html and add an ID like so: (By the way, I used a google image as a place holder, but you get the idea)
<div id="pic">
<img src="https://www.google.com/logos/doodles/2014/jonas-salks-100th-birthday-5130655667060736-hp.jpg" alt="AG" class="logo">
</div>
and then for the CSS
#pic {
width: 500px;
height: 467px;
margin-left: auto;
margin-right: auto;
See it work at http://jsfiddle.net/e5pdof91/
}
First put your image inside a container, otherwise the height and width are just editing the size of the picture.
I added it into a div and then added the properties into its own container.
http://codepen.io/anon/pen/uHaGC
Here is a code pen.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<title>
AG.
</title>
<body>
<div id="logo">
<img src="images/logo.png" alt="AG">
</div>
</body>
</html>
#logo {
position: relative;
width: 50%;
margin-left: auto;
margin-right: auto;
}
The #logo tag centers it (maybe not depending on your resolution). Just set a new tag for your image and change the size!
I prefer using percentages rather than amount of pixels because it then looks better on bigger or smaller resolutions.