I have two pages that are making use of absolute and relative positioned elements at the top of the page. The issue is that the lower content is coming in sooner than the header content which is causing a flickering effect on these pages:
http://test.icpm.biz/blog/index.html
http://test.icpm.biz/blog/article.html
It is most noticeable in Chrome.
CSS:
.single-article figure {
position: relative;
overflow: hidden;
min-width: 100%;
max-width: 100%;
max-height: 550px;
width: 100%;
background: #black;
text-align: center;
margin-top: 0px;
padding-top: 0px;
-webkit-transform: translate3d(0, 0, 0);
}
.single-article figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 1000;
-webkit-transform: translate3d(0, 0, 0);
}
.block {
position: absolute;
max-height: 1px;
width: 100%;
z-index: 3000;
top: 0%;
left: 0%;
right: 0%;
bottom: 0%;
-webkit-transform: translate3d(0, 0, 0);
}
HTML:
<!DOCTYPE html>
<html class='no-js' lang='en'>
<head>
<meta charset='utf-8'>
<meta content='IE=edge' http-equiv='X-UA-Compatible'>
<!-- Website Title -->
<title>Institute of Certified Professional Managers</title>
<!-- Metatag Info -->
<meta content='' name='description'>
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
<!-- Favicon and Apple Icons -->
<link href='img/favicon.png' rel='shortcut icon'>
<link href='img/apple-touch-icon.png' rel='apple-touch-icon' sizes='57x57'>
<link href='img/apple-touch-icon-72x72.png' rel='apple-touch-icon' sizes='72x72'>
<link href='img/apple-touch-icon-114x114.png' rel='apple-touch-icon' sizes='114x114'>
<!-- CSS Stylesheets -->
<link href='css/style.css' rel='stylesheet'>
<!-- Include Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Neuton:200,300,400,700,800' rel='stylesheet' type='text/css'>
<script charset='ISO-8859-1' src='http://fast.wistia.com/assets/external/popover-v1.js'></script>
<script src='js/modernizr-2.8.3.min.js'></script>
<script src='js/respond.js'></script>
<!--[if lt IE 9]> <script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('figure'); document.createElement('figcaption'); document.createElement('footer'); </script> <![endif]-->
</head>
<body>
<!-- Featured Article -->
<div class='single-article'>
<figure>
<img alt="Article Bg" data-src="<1043:bullet-proof-mobile.jpg, >1044:bullet-proof.jpg" data-src-base="img/article-bg/"/>
</figure>
<div class='block'>
<div class='container'>
<div class='row blog-logos'>
<div class='col-12 show-mobile hide-tablet'>
<div class='icpm-blog-logo'>
<p>
<a href='index.html' title='Return to Homepage'>
<img alt='ICPM Logo' src='img/ICPM-Logo-Home.png'>
</a>
</p>
</div>
</div>
<div class='col-12 col-tablet-6'>
<div class='mgmt-blog-logo'>
<p>
<a href='index.html' title='Return to Homepage'>
<img alt='MGMT Blog Logo' src='img/mgmt-blog-logo.png'>
</a>
</p>
</div>
</div>
<div class='col-12 col-tablet-6 hide-mobile show-tablet'>
<div class='icpm-blog-logo'>
<p>
<a href='index.html' title='Return to Homepage'>
<img alt='ICPM Logo' src='img/ICPM-Logo-Home.png'>
</a>
</p>
</div>
</div>
</div>
<div class='row'>
<div class='col-12 col-desktop-9'>
<h1>Bullet-Proofing your Career and Seeing what a Two Line Title Looks like</h1>
<h4>Susan Mucha, CM</h4>
<p>September, 24 2015</p>
</div>
<div class='col-3 hide-mobile show-desktop'>
<p> </p>
</div>
</div>
</div>
</div>
</div>
<!-- Blog Articles -->
<div class='container wrapper'>
<div class='row'>
<div class='col-12 col-tablet-6 col-desktop-4'>
<div class='articles'>
<figure class='effect-overlay'>
<img alt='Bullet Proof Photo' src='img/article-bg/bullet-proof.jpg'>
<figcaption>
<div>
<h2>Bullet-Proofing Your Career</h2>
<h4>Susan Mucha, CM</h4>
</div>
</figcaption>
</figure>
</div>
</div>
<div class='col-12 col-tablet-6 col-desktop-4'>
<div class='articles'>
<figure class='effect-overlay'>
<img alt='Mid Career Photo' src='img/article-bg/mid-career.jpg'>
<figcaption>
<div>
<h2>Why & How to Make a Mid-Career Job Change</h2>
<h4>Tracey Renzi, CM</h4>
</div>
</figcaption>
</figure>
</div>
</div>
<div class='col-12 col-tablet-6 col-desktop-4'>
<div class='articles'>
<figure class='effect-overlay'>
<img alt='Career Photo' src='img/article-bg/career.jpg'>
<figcaption>
<div>
<h2>Leaving the Military: Now What?</h2>
<h4>Sean Forney, CM</h4>
</div>
</figcaption>
</figure>
</div>
</div>
<div class='col-12 col-tablet-6 col-desktop-12'>
<div class='articles'>
<figure class='effect-overlay'>
<img alt='Military Photo' src='img/article-bg/military.jpg'>
<figcaption>
<div>
<h2>3 Things They Didn't Tell me in College</h2>
<h4>Michael Davis, CM</h4>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
This happens because the image you are loading in the element doesn't have any dimensions. So the solutions would be:
a) Give dimensions to the image loaded inside the figure, eg:
width="100%
height="550"
b) Even better, don't give the figure a max-height:550px, but rather a height:550px and use the image as a background-image and scale it accordingly using background-size:cover.
You can use jquery to initially hide the element that take longer to load and then fade them in nicely.
$(document).ready(function(){
$(".myElement").delay(2000).fadeIn();
});
And in your css
.myElement{
display:none
}
Also many of the relative positioning in there is unnecessary.
Related
I am very new to this so please be kind :)
I am creating a portfolio page with an image gallery, with a header on top and a footer at the bottom. As soon as I entered the code for a gallery, my footer moved - and now I can't see how I can make it all in one line (like it is on the home page I created! It seems fine!)
If anyone would like to give any advice on how to fix this, I'd be so happy! Also for some reason the footer is just floating in the middle of the page?!
Thank you.
#banner{
text-align: center;
}
#heading{
font-size: 25px;
text-align: center;
}
html * {
font-family: 'Quicksand', sans-serif;
text-decoration-color: #f13c20;
}
.navbar{
text-align: center;
font-size: 23px;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.column {
float: center;
width: 32%;
padding: 4px;
}
.row::after {
display: table;
}
.footer-navbar{
text-align: center
font-size: 20px;
position: fixed; bottom
}
#copyfoot{
text-align: center;
}
#footernav{
text-align: center;
}
<!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>Maley Like Maybe</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<!-- <---Header--->
<div id=banner>
<img src="images/banner.jpg" width="1250px" height="159px"/></div>
<div id="heading">
<h1>Karen Maley</h1>
</div>
<nav class="navbar">
Home
<!-- Testimonials -->
Contact
</nav>
<hr />
<br>
<br>
<br>
<!-- <---Main -->
<div class="gallery">
<a target="_blank" href="images/portfolio/adviceteacher.jpg">
<img src="images/portfolio/adviceteacher.jpg" alt="Advice from my Art Teacher 2001">
</a>
<div class="desc">Advice from Art Teacher 2001</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/epping.jpg">
<img src="images/portfolio/epping.jpg" alt="Forest">
</a>
<div class="desc">Epping Forest</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/immaterial2022.jpg">
<img src="images/portfolio/immaterial2022.jpg" alt="I'mmaterial">
</a>
<div class="desc">I'mmaterial</div>
</div>
<div class="gallery">
<a target="_blank" href="images/portfolio/lifedrawing.jpg">
<img src="images/portfolio/lifedrawing.jpg" alt="Life Drawing">
</a>
<div class="desc">Life Drawing - Movement</div>
</div>
<br>
<div class="gallery">
<div style="padding:35% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/721109316?h=07caa51b7c&badge=0&autopause=0&player_id=0&app_id=58479"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"
title=""Peace is Exhausting" by Karen Maley 2022">
</iframe></div><script src="https://player.vimeo.com/api/player.js"> </script>
</div>
<div class="gallery">
<div style="padding:40% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/721142192?h=bfcb05da44&badge=0&autopause=0&player_id=0&app_id=58479"
frameborder="0" allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"
title=""Mobile""></iframe></div>
<script src="https://player.vimeo.com/api/player.js"></script>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<!-- <---Footer -->
<footer>
<div id="footernav">
<div class="footer-content">
<nav class="footer-navbar">
Home
<!-- Testimonials -->
Portfolio
Contact
</nav>
</div>
<br>
<br>
<div class="row">
<div class="column">
<a href="mailto:maleylikemaybe#hotmail.com">
<img src="images/socialMedia/email.png" alt="maleylikemaybe#hotmail.com"
width="64px" height="64px"><p>maleylikemaybe#hotmail.com</p>
</a>
</div>
<div class="column">
<a href="https://www.instagram.com/maleylikemaybe/">
<img src="images/socialMedia/insta.jpg" alt="#maleylikemaybe"
width="64px" height="64px" ><p>#maleylikemaybe</p></a>
</a>
</div>
<div class="column">
<a href="https://www.youtube.com/channel/UC96yaCbQbhyck2mNY0lMU9Q">
<img src="images/socialMedia/youTube.png" alt="Maley Like Maybe"
width="64px" height="64px" ><p>Maley Like Maybe</p></a>
</div>
</div>
<div id="copyfoot">
<p class="footer-cpr"> © Karen Maley 2022</p></div>
</footer>
</body>
</html>
I'm trying to include an image above text, however it affects the text if I resize that image. Whatever I try to do, either it losses responsiveness or moves text under the screen (I have one page 'body' with hidden overflow). I managed to move an image to the center of the screen both in height and width without it affecting the text below, but changing it's width makes it non responsive and moves other elements. Any help?
In short: I want that image above the text, bigger, responsive and not affecting the text.
.pagr_foto {
border-style: solid;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
}
.container {
position: absolute;
left: 30%;
top: 64%;
max-width: 70%;
}
.icon {
width:85px;
height: auto;
margin-left: 35%;
}
.rows {
display: flex;
flex-direction: row;
width: 80%;
max-width: 80%;
column-gap: 8px;
margin-left: 5%;
}
<div class="container">
<!--DIDELE FOTKE STARTS-->
<div class="pagr_foto">
<div class = "pagr_foto_remas">
<img src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
</div>
<!--DIDELE FOTKE ENDS-->
<!--TEKSTAS PO APACIA STARTS-->
<div class = "fadein"> <!--FADE IN ANIMACIJA-->
<div class="container_text">
<div class = "rows">
<div class="feature">
<div style="display:flex;flex-direction:column">
<!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/group.png" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/list.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/chat.png" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
why you don't use Bootstrap instead of CSS3? Like this for example:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Sample</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<img class="img-fluid" src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://estaticos.muyinteresante.es/media/cache/1140x_thumb/uploads/images/gallery/59c4f5655bafe82c692a7052/gato-marron_0.jpg" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
<div class="col-4">
<img class="img-fluid" src="https://dam.ngenespanol.com/wp-content/uploads/2019/02/gatos-caja-2.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
<div class="col-4">
<img class="img-fluid" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/10E9B/production/_109757296_gettyimages-1128004359.jpg" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
Because you are giving position absolute to .pagr_foto. And you didn't mention any css for image. By default image tag won't respect any other elements. So you have to mention style by your own.
.pagr_foto {
border-style: solid;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.pagr_foto_img{
width: 100%;
}
.container {
position: absolute;
left: 30%;
top: 64%;
max-width: 70%;
}
.icon {
width:85px;
height: auto;
margin-left: 35%;
}
.rows {
display: flex;
flex-direction: row;
width: 80%;
max-width: 80%;
column-gap: 8px;
margin-left: 5%;
}
<div class="container">
<!--DIDELE FOTKE STARTS-->
<div class="pagr_foto">
<div class = "pagr_foto_remas">
<img src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
</div>
<!--DIDELE FOTKE ENDS-->
<!--TEKSTAS PO APACIA STARTS-->
<div class = "fadein"> <!--FADE IN ANIMACIJA-->
<div class="container_text">
<div class = "rows">
<div class="feature">
<div style="display:flex;flex-direction:column">
<!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/group.png" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/list.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/chat.png" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
I try to use flickity to have a good looking lazy loading image carousel. It works great on chrome and safari but the slide doesn't size correctly to the image in firefox.
Please try the following link with firefox and another browser to get the idea: imagescroll
Does anyone knows how to fix the issue with firefox without losing the ability to have variable slide widths? Thank you very much!
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/flickity#2.0/dist/flickity.css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<style>
* {box-sizing: border-box;}
body { margin: 0; padding: 0;}
.imgc {
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.carousel img {
display: block;
height: 100%;
opacity: 0;
transition: opacity 0.7s;
}
.carousel img.flickity-lazyloaded {
opacity: 1;
}
</style>
<script src="https://unpkg.com/flickity#2.0/dist/flickity.pkgd.min.js"></script>
</head>
<body>
<!-- Flickity HTML init -->
<div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "wrapAround":true,"draggable": true, "pageDots": false, "prevNextButtons": false,"setGallerySize": false,"lazyLoad":true,"lazyLoad": 1}'>
<div class="imgc" style="background-image: url('static/room/image1_small.jpg')">
<img src="static/room/image1_small.jpg" data-flickity-lazyload="static/room/comp/image1.jpg" alt="orange tree" />
</div>
<div class="imgc" style="background-image: url('static/room/image2_small.jpg')">
<img src="static/room/image2_small.jpg" data-flickity-lazyload="static/room/comp/image2.jpg" alt="submerged" />
</div>
<div class="imgc" style="background-image: url('static/room/image3_small.jpg')">
<img src="static/room/image3_small.jpg" data-flickity-lazyload="static/room/comp/image3.jpg" alt="look-out" />
</div>
<div class="imgc" style="background-image: url('static/room/image4_small.jpg')">
<img src="static/room/image4_small.jpg" data-flickity-lazyload="static/room/comp/image4.jpg" alt="One World Trade" />
</div>
<div class="imgc" style="background-image: url('static/room/image5_small.jpg')">
<img src="static/room/image5_small.jpg" data-flickity-lazyload="static/room/comp/image5.jpg" alt="drizzle" />
</div>
<div class="imgc" style="background-image: url('static/room/image6_small.jpg')">
<img src="static/room/image6_small.jpg" data-flickity-lazyload="static/room/comp/image6.jpg" alt="cat nose" />
</div>
</div>
</body>
</html>
very new to HTML and CSS. Can't get my text to move under my images. I have 4 images and under them I want to be a paragraph of text. This is probably a dumb question so please excuse my ignorance. I cant get the text to move where I want(and the values in the CSS file, pixel wise, are wrong but I can't even get 3 of them to show up to try and adjust them as its under my navbar or the images?). The images show up, in the correct order and are formatted correctly.
Trying to get to look like this:
https://gyazo.com/c3de4fa6832107a8f16300cbacca47f8
Thanks in advance
Here is my CSS/HTML files:
.img {
position: relative;
float: left;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
.text2 {
position:relative;
left:200px;
top:400px:
}
.text3 {
position:absolute;
left:300px;
top:400px:
}
.text4 {
position:absolute;
left:400px;
top:400px:
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="about.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Title</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Links</li>
<li>LinkedIn</li>
<li>Github</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xxx.jpg" class="img-circle img">
<img src="images/xx.jpg" class="img-circle img">
<div id="text1">
<p>TEXT UNDER PIC 1</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 2</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 3</p>
</div >
<div id="text1">
<p>TEXT UNDER PIC 4</p>
</div >
</div>
</body>
</html>
http://codepen.io/lostdino/pen/LpKKra
I wasn't sure if you wanted to keep your HTML structure or if it was open to revision so I just worked within the constraints your provided. What I did was remove your floats and instead use display: inline-block which will stack elements horizontally rather than vertically within their container. You can see I've also used [id*="text"] which will allow the capture of any elements with an id that contains 'text'. I'd suggest also moving away from pixels and go for a more responsive unit such as percentages or rem. If you think there is value in me showing you how I would approach this problem I'm more than happy to throw a quick example together for you. I hope this helps.
.img {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
padding-top: 100px;
}
.text1 {
position:relative;
left:100px;
top:400px:
}
[id*="text"] {
width: 250px;
display: inline-block;
}
With respect to the other answers assuming there is an image and caption relationship between the text and the images then a possible improvement to the solution would be as follows:
http://codepen.io/lostdino/pen/PPrryZ
.gallery img {
position:relative;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.gallery {
padding-top: 100px;
padding-left: 10px;
position:relative;
}
.gallery > figure {
position: relative;
display:inline-block;
width: 250px;
height: 250px;
}
The HTML of the gallery restructured like so:
<div class="gallery">
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 1</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 2</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 3</figcaption>
</figure>
<figure>
<img src="" alt="" class="gallery-image" />
<figcaption class="gallery-image-caption">TEXT UNDER PIC 4</figcaption>
</figure>
</div>
The reason your text isn't aligning as you'd wish is because <p> and <div> are block level elements by default, which means they'll fill space and start on new lines. To remedy this, you could change the display property to be inline.
That said, you're approaching this wrong, you're not grouping your image and the caption together. Your structure should be more along these lines:
<div class="container">
<!-- Image One -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Two -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
<!-- Image Three -->
<div class="image-container">
<img src="#.jpg" alt="a" class="img-circle img" />
<div class="image-text">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
You would then set your desired widths on the .image-container class, and your image and captions will follow suite.
Your paragraphs are not nested in the proper order to achieve this. Make sure you place the paragraph tags within the div tag that contains the images.
Also, use the inspect element tool when you refresh your browser. In Google Chrome, go to View, Developer, and select Developer tools. A new window will appear at the bottom of the browser. When you hover over the font-end interface, the page will highlight your html nesting-structure.
Hope this helps, let me know if you have any more questions!
The solution has been found. The code is below. Thank you to everyone who helped.
The Solution was to clear the float, the code below fixed it for me.
.div#content:after {
content:"";
display:table;
clear:both;
}
Thanks Again.
Original Question
I have 2 Divs, one being "Content" where all the content of my site is in. And another div named "updates". I want the div "content" to resize its height so that all the divs inside of it and fit.
Here's an image explaining my problem easier Imgur Link, Not high enough rep to post image directly.
Here's my full source code (html) (along with the css of content div and updates div.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>MCSocial</title>
<script type="text/javascript" src="src/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="src/jquery.tinycircleslider.js"></script>
</head>
<body>
<div id="container">
<div id="content">
<nav>
<ul class="nav">
<li class="left">MCFish</li>
<li>Home</li>
<li>News</li>
<li>Members</li>
<li>Media</li>
</ul>
</nav>
<a href="#"><div id="block">
<img src="img/mojang.jpg" height="200px" width="850px">
</div></a>
<a href="#"><div id="block">
<img src="img/minecraft.jpg" height="200px" width="850px">
</div></a>
<div id="updates">
<img src="img/update.png" height="48px" width="140px">
<!--post updates here-->
<h3 class="sub-title">Update 1.5</h3>
<p class="list">Added a new homepage! More simple to navigate! Enjoy!<br>Please send me some feedback here!</p>
<h3 class="sub-title">Update 1.4</h3>
<p class="list">Cleaned up code!</a></p>
<h3 class="sub-title">Update 1.3</h3>
<p class="list">Added new themes! Check them out!</a></p>
<h3 class="sub-title">Update 1.2</h3>
<p class="list">Renamed Site: from MinecraftFishing to MCFish!</a></p>
<h3 class="sub-title">Update 1.0</h3>
<p class="list">Site goes LIVE!</p>
<!--end post updates-->
</div>
<div id="twitter">
<img src="img/twitter.png" height="48px" width="140px"><br><br>
<a class="twitter-timeline" href="https://twitter.com/FluffyRabbitzZ" data-widget-id="544642022154723328">Tweets by #FluffyRabbitzZ</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div id="footer">
<p>©2014. MCSocial. All Rights Reserved.</p>
</div>
</div>
</div>
</body>
</html>
and the CSS;
div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: auto;
border-radius: 2px;
min-height: 100%;
position: relative;
}
div#updates {
float: left;
margin-left: 2.6%;
}
Thanks for any help.
You should clear the float.
Add overflow CSS property (for example :auto) to the div#content.
A solution for modern browsers :
.div#content:after {
content:"";
display:table;
clear:both;
}
You have to clear the floating content:
<div style="clear:both"></div>
before closing yout div.content.