I have an annoying problem with my HTML page.
Here you can see my webpage: http://jgeneration.altervista.org/layout3.html
If you don't resize the window of your browser, you'll see it right, but if you do it then something strange happens. The first three divs of the second row get moved into a kind of new row when the second div of the first row gets bigger.
That's what happens:
Screenshot 1
I want the divs to be like a waterfall like style, so they must adapt their position according to the height of the other ones.
Here's my HTML & CSS.
<!DOCTYPE html>
<html>
<head>
<title>Muzic4U</title>
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
<div style="max-width: 100%; background-color: #0099FF; text-align: center; color: #fff; padding: 20px; margin: 0;">
<h1 style="margin: 0;"> Muzic4U </h1>
</div>
<div id="main">
<div class="tab">
<img src="http://cdn.albumoftheyear.org/album/25168-blast-radius.jpg" />
<p class="caption"> <b> Insight </b><br> <i>The Blast Radius</i><br>2004</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="http://static.marapcana.com/wp-content/uploads/2015/05/Orgasmi-Meccanici-cover.jpg" />
<p class="caption"> <b> Alien Army </b><br> <i>Orgasmi Meccanici</i><br>1999</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="http://img.maniadb.com/images/album/187/187420_1_f.jpg" />
<p class="caption"> <b> Surreal & The Sound Providers </b><br> <i>True Indeed</i><br>2003</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b> <br> <i>The Find</i> <br> 2005 </p>
<div class="dw">
Download
</div>
</div>
<span class="clear"></span>
</div>
<style>
body {
font-family: Ubuntu, sans-serif;
padding: 0;
margin: 0;
background-color: #333;
}
/* unvisited link */
a:link {
color: #fff;
}
/* visited link */
a:visited {
color: #fff;
}
/* mouse over link */
a:hover {
color: #fff;
}
/* selected link */
a:active {
color: #fff;
}
img {
display: table-cell;
max-width: 100%;
}
#main {
margin: 0 auto;
padding: 5px 0 0 5px;
max-width: 70%;
}
.tab {
max-width: calc((100% / 5) - 5px);
background-color: #666;
text-align: center;
float: left;
display: inline-block;
margin: 0 5px 5px 0;
}
.dw {
max-width: 100%;
background-color: #000;
padding: 10px;
}
span.clear {
clear: left;
display: block;
}
.caption {
font-size: smaller;
}
</style>
</body>
Thank you for the support.
This happens because when the page gets smaller the text from the third <p class="caption"> needs one more line.
give your .caption following style:
.caption {
font-size: smaller;
min-height: 80px;
}
So all p-tags have the same height and the float will work again. If it happens again when it gets even smaller you maybe need to increase the px-size of min-height. Here is a code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Muzic4U</title>
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
<div style="max-width: 100%; background-color: #0099FF; text-align: center; color: #fff; padding: 20px; margin: 0;">
<h1 style="margin: 0;"> Muzic4U </h1>
</div>
<div id="main">
<div class="tab">
<img src="http://cdn.albumoftheyear.org/album/25168-blast-radius.jpg" />
<p class="caption"> <b> Insight </b><br> <i>The Blast Radius</i><br>2004</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="http://static.marapcana.com/wp-content/uploads/2015/05/Orgasmi-Meccanici-cover.jpg" />
<p class="caption"> <b> Alien Army </b><br> <i>Orgasmi Meccanici</i><br>1999</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="http://img.maniadb.com/images/album/187/187420_1_f.jpg" />
<p class="caption"> <b> Surreal & The Sound Providers </b><br> <i>True Indeed</i><br>2003</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b> <br> <i>The Find</i> <br> 2005 </p>
<div class="dw">
Download
</div>
</div>
<span class="clear"></span>
</div>
<style>
body {
font-family: Ubuntu, sans-serif;
padding: 0;
margin: 0;
background-color: #333;
}
/* unvisited link */
a:link {
color: #fff;
}
/* visited link */
a:visited {
color: #fff;
}
/* mouse over link */
a:hover {
color: #fff;
}
/* selected link */
a:active {
color: #fff;
}
img {
display: table-cell;
max-width: 100%;
}
#main {
margin: 0 auto;
padding: 5px 0 0 5px;
max-width: 70%;
}
.tab {
max-width: calc((100% / 5) - 5px);
background-color: #666;
text-align: center;
float: left;
display: inline-block;
margin: 0 5px 5px 0;
}
.dw {
max-width: 100%;
background-color: #000;
padding: 10px;
}
span.clear {
clear: left;
display: block;
}
.caption {
font-size: smaller;
min-height: 80px;
}
</style>
</body>
Marcel's solution is good, another approach however would be to use this bit of css code on your caption:
overflow: hidden;
white-space: nowrap; /* Don't forget this one */
text-overflow: ellipsis;
So that if your text is too long (longer than 4 lines in this case) it will be replaced by '...'. That way you won't get that extra line that breaks your floats.
<!DOCTYPE html>
<html>
<head>
<title>Muzic4U</title>
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
<div style="max-width: 100%; background-color: #0099FF; text-align: center; color: #fff; padding: 20px; margin: 0;">
<h1 style="margin: 0;"> Muzic4U </h1>
</div>
<div id="main">
<div class="tab">
<img src="http://cdn.albumoftheyear.org/album/25168-blast-radius.jpg" />
<p class="caption"> <b> Insight </b><br> <i>The Blast Radius</i><br>2004</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="http://static.marapcana.com/wp-content/uploads/2015/05/Orgasmi-Meccanici-cover.jpg" />
<p class="caption"> <b> Alien Army </b><br> <i>Orgasmi Meccanici</i><br>1999</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="http://img.maniadb.com/images/album/187/187420_1_f.jpg" />
<p class="caption"> <b> Surreal & The Sound Providers </b><br> <i>True Indeed</i><br>2003</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b><br> <i>The Find</i><br>2005</p>
<div class="dw">
Download
</div>
</div>
<div class="tab">
<img src="https://pbs.twimg.com/media/COxJmdQWcAAFauN.jpg" />
<p class="caption"> <b> Ohmega Watts </b> <br> <i>The Find</i> <br> 2005 </p>
<div class="dw">
Download
</div>
</div>
<span class="clear"></span>
</div>
<style>
body {
font-family: Ubuntu, sans-serif;
padding: 0;
margin: 0;
background-color: #333;
}
/* unvisited link */
a:link {
color: #fff;
}
/* visited link */
a:visited {
color: #fff;
}
/* mouse over link */
a:hover {
color: #fff;
}
/* selected link */
a:active {
color: #fff;
}
img {
display: table-cell;
max-width: 100%;
}
#main {
margin: 0 auto;
padding: 5px 0 0 5px;
max-width: 70%;
}
.tab {
max-width: calc((100% / 5) - 5px);
background-color: #666;
text-align: center;
float: left;
display: inline-block;
margin: 0 5px 5px 0;
}
.dw {
max-width: 100%;
background-color: #000;
padding: 10px;
}
span.clear {
clear: left;
display: block;
}
.caption {
font-size: smaller;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</body>
Everytime your text goes on two lines you will get that effect. To improve and to achieve the desired solution the best way is to equal_heights().
1.Include the jQuery library in your project:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
2.Use this script:
$(window).load(function(){
equal_heights();
}).resize(function(){
equal_heights();
});
function equal_heights(){
_max = 0;
$('.tab .caption').removeAttr('style');
$('.tab').each(function(){
_height = $('.caption', this).height();
if (_max < _height) {
_max = _height;
};
});
$('.tab .caption').height(_max);
}
Here is a jsfiddle for it: https://jsfiddle.net/6LLgguq0/
The real solution (for a fixed number n of items per row) is to apply a clear: left; to every nth+1 item:
#main div:nth-of-type(5n+1) {
clear: left;
}
Related
I'm doing a landing page for testing flexbox technology. I ran into a problem: I can't figure out how to position a large number of elements without resorting to crutches like this:
Also without resorting to position:absolute, because there will be inaccuracies in the margins or it will take a very long time to calculate these margins.
This is what I currently have:
On the second one, I indicated how I see one of the working implementation options: organize two columns in footer and make them flex-direction: column.
Here is my markup:
<footer class="footer">
<div class="footer__logo">
<img src="icons/Logo.svg" alt="logo" class="logo__img">
<p class="logo__text"> PETWORLD </p>
</div>
<div class="footer__input">
<label for="email" class="text">Updates right to your Inbox</label>
<input type="email" placeholder="Email Address" class="text">
<input type="submit" value="Send" class="submit__text text">
</div>
<div class="footer__privacy">
<p class="privacy__text"> Text</p>
<p class="privacy__text"> Text</p>
<p class="privacy__text"> Text</p>
</div>
<div class="footer__menu">
<!-- x3 колонки текста -->
<div class="menu__text">
<p class="text">Text</p>
<p class="text">Text</p>
<p class="text">Text</p>
</div>
</div>
<div class="footer__social">
<img src="icons/Socials icons.svg" alt="" class="logo__img">
</div>
</footer>
I decided to move away from BEM a bit and divided my footer into two visual components.
What came out in the end can be viewed below:
https://codepen.io/productomar/pen/ZEvNQjG
------------------HTML---------------------
<div class="container__footer">
<footer class="footer">
<div class="first__half">
<div class="footer__logo">
<img src="icons/Logo.svg" alt="logo" class="logo__img">
<p class="logo__text"> PETWORLD </p>
</div>
<div class="footer__input">
<label for="email" class="text">Updates right to your Inbox</label>
<input type="email" placeholder="Email Address" class="placeholder__text">
<input type="submit" value="Send" class="submit__text text">
</div>
<div class="footer__privacy">
<p class="privacy__text"> © PETWORLD 2022</p>
<p class="privacy__text"> Privacy policy</p>
<p class="privacy__text"> Terms of use</p>
</div>
</div>
<div class="second__half">
<div class="footer__menu">
<div class="menu__text">
<p class="text menu__b" style="font-weight: 600;">Our story</p>
<p class="text__item text">FAQ</p>
<p class="text__item text">Contact</p>
</div>
<div class="menu__text">
<p class="text menu__b" style="font-weight: 600;">Pet care</p>
<p class="text__item text">Treatments</p>
<p class="text__item text">Health</p>
<p class="text__item text">Hygiene </p>
</div>
<div class="menu__text">
<p class="text menu__b" style="font-weight: 600;">Shop</p>
<p class="text__item text">Pet Food</p>
<p class="text__item text">Toys</p>
<p class="text__item text">Accessories</p>
</div>
</div>
<div class="footer__social">
<img src="icons/Socials icons.svg" alt="logo__social" class="logo__social">
</div>
</div>
</footer>
</div>
------------------CSS---------------------
/* Первая часть футера */
.first__half {
display: flex;
flex-direction: column;
}
.footer {
display: flex;
padding: 70px 80.5px;
}
.footer__logo {
display: flex;
align-items: center;
}
.logo__text {
font-weight: bold;
}
.footer__input {
margin-top: 75px;
}
label {
display: block;
}
input[type="email"] {
border: 1px solid #D0D0D0;
border-radius: 10px;
margin-top: 12px;
}
.placeholder__text {
padding-top: 11px;
padding-bottom: 11px;
padding-left: 20px;
padding-right: 71px;
font-size: 18px;
color: #2D2D2D;
}
.submit__text {
padding: 11px 31.5px;
background-color: #3366FF;
color: white;
border-radius: 10px;
margin-left: 20px;
}
.footer__privacy {
display: flex;
margin-top: 33px;
}
.privacy__text {
margin-right: 30px;
font-weight: 600;
}
.privacy__text:nth-child(3) {
margin-right: 0px;
}
/* Вторая часть футера */
.second__half {
margin-left: 233px;
}
.footer__menu {
display: flex;
}
.menu__text {
margin-right: 60px;
}
.text__item {
padding-top: 16px;
}
.menu__text:nth-child(3) {
margin-right: 0px;
}
.footer__social {
margin-top: 99px;
}
.logo__social {
margin-left: 237px;
}
I'm using an article header to divide up some projects I wish to display:
.project-elem {
background-color: greenyellow;
padding-top: 5rem;
padding-bottom: 5rem;
height: 300px;
}
.projects {
margin: 0;
padding: .7rem;
background-color: #DDCDE8;
font: Asap, sans-serif;
height: 1000px;
}
.project-n {
background-color: green;
text-align: center;
width: 60%;
float: left;
padding: 2.5rem;
}
.img {
background-color: blue;
text-align: center;
padding: 3rem;
margin-left: 40%;
}
<div class="projects" id=#projects>
<h2>My Projects</h2>
<article class="project-elem">
<div class="project-n" id="dictocounter">
<h3>Dictation Counter</h3>
<p>info about proj</p>
<img src="dictocounter1.jpg" alt="Dictocounter in Action">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="calc">
<h3>RPN Calculator</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="RPN Calculator Decoding Input">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="markov">
<h3>Markov Chain Text Generation</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Markov Chain Text Generation">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="audio">
<h3>Song Similarities</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Audio Spectral Analysis">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="tree">
<h3>DFS/BFS Search Tree</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Simple Trees">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
</div>
Yet, even though I pad project-elem explicitly, the actual project-elem articles are not padded (rather, smushed all together into one lime-green blob):
I can tell that there is no padding between the project elements because the outer division (with bkgrd color purple) cannot be seen between each of the lime-green project elements. Why is this the case, and how can I fix this?
Also, how can I make the img class vertically-even with the project-n class?
You might need margin-bottom instead of padding-bottom;
By using padding you don't seperate them, padding works kind of from-inside.
You may read about box-model here to understand this.
Since the project-elem has only padding and not margin, there is no gap between different elements with the class "project-elem"
Change padding to margin for your requirement as shown below:
.project-elem {
background-color: greenyellow;
margin-top: 5rem;
margin-bottom: 5rem;
height: 300px;
}
.projects {
margin: 0;
padding: .7rem;
background-color: #DDCDE8;
font: Asap, sans-serif;
height: 1000px;
}
.project-n {
background-color: green;
text-align: center;
width: 60%;
float: left;
padding: 2.5rem;
}
.img {
background-color: blue;
text-align: center;
padding: 3rem;
margin-left: 40%;
}
Understand the difference between padding and margin. You can refer this: https://stackoverflow.com/a/2189462/12774953
I suggest you to use flex-box for this.
It would be something like this:
html
<html>
<head>
<style>
.project-elem {
background-color: greenyellow;
padding-top: 5rem;
padding-bottom: 5rem;
height: 300px;
display: flex;
justify-content: space-between;
}
.projects {
margin: 0;
background-color: #DDCDE8;
font: Asap, sans-serif;
height: 1000px;
box-sizing: border-box;
}
.project-n {
background-color: green;
text-align: center;
width: 60%;
padding: 2.5rem;
box-sizing: border-box;
}
.img {
background-color: blue;
text-align: center;
padding: 3rem;
box-sizing: border-box;
width: 25%;
}
</style>
</head>
<body>
<div class="projects" id=#projects>
<h2>My Projects</h2>
<article class="project-elem">
<div class="project-n" id="dictocounter">
<h3>Dictation Counter</h3>
<p>info about proj</p>
<img src="dictocounter1.jpg" alt="Dictocounter in Action">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="calc">
<h3>RPN Calculator</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="RPN Calculator Decoding Input">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="markov">
<h3>Markov Chain Text Generation</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Markov Chain Text Generation">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="audio">
<h3>Song Similarities</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Audio Spectral Analysis">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
<article class="project-elem">
<div class="project-n" id="tree">
<h3>DFS/BFS Search Tree</h3>
<p>info about proj</p>
<img src="calc.jpg" alt="Simple Trees">
</div>
<div class="img">
<p>heres SOME IMAGE</p>
</div>
</article>
</div>
</body>
</html>
I've been making my anime website where people can watch anime for free with subtitles (Bulgarian subtitles, since I'm from Bulgaria). Now I'm remaking it from scratch because I have been using a theme but It didn't have much functionality... Now I'm making the slider for the recently added animes but I want it to be a custom one so I'm making.... the slider controls are not in a position, so I tried with float, flex with float, etc.... Here's a picture where it should belong: click to open the image (important)
Here's the HTML:
<div class="recent-anime">
<!-- Title and Controls -->
<div class="title-controls">
<h1 class="title">Наскоро добавни</h1>
<a><i class="fas fa-angle-left"></i></a>
<a><i class="fas fa-angle-right"></i></a>
</div>
<!-- Anime cards -->
<div class="animecards">
<div class="animecard">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
<div class="animecard ml">
<img src="images/cover.png">
<div class="ani">
<p class="anititle">Anime title</p>
<p class="aniepisode">Episode</p>
</div>
</div>
</div>
</div>
And the CSS:
.title-controls {
display: flex;
flex-direction: row;
font-size: 42px;
margin-bottom: 10px;
}
.title {
font-size: 26px;
}
.animecards {
display: flex;
}
.animecard {
display: block;
float: left;
}
.animecard img {
max-height: 325px;
}
.ml {
margin-left: 15px;
}
.ani {
text-align: center;
}
There's no JS. Still on the HTML and CSS part.
NOTE: This is clean CSS!
justify-content: space-between; on title-controls class will solve the issue shown in image
.title-controls {
display: flex;
flex-direction: row;
font-size: 42px;
margin-bottom: 10px;
justify-content: space-between;
}
I'm trying to get the images on both of divs below to act as a left-column while the accompanying text acts as a right column, both in the same row.
Each row should have the other images and texts along with it. Somewhere in the shuffle, I've got my divs mixed up and they aren't working properly. I need the text to stay within the container on the right. What am I missing?
.toplinks {
width: 300px;
padding: 20px;
overflow: hidden;
}
.icon {
width: 30%;
float: left;
}
.hlbox {
width: 300px;
border: 1px solid;
border-radius: 9px 9px 9px 9px;
border-color: #999999;
background-image: url(http://ejgh.org/templates/ejgh/images/HLHeader.png), url(http://ejgh.org/templates/ejgh/images/healthyLifestyles_bottom.gif);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: top, bottom;
padding: 100px 20px 25px;
overflow: hidden;
}
.HLrow {
display: block;
border: 1px solid;
border-color: green;
width: 100%;
}
.HLicon {
width: 30%;
border: 1px solid;
border-color: red;
display: table-cell;
float: left;
height: inherit;
}
.HLtext {
width: inherit;
border: 1px solid;
border-color: purple;
}
<div class="toplinks">
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/findphysicianicon.jpg" alt="Find a Physician Icon" /></div>
<div class="text">
<h3>Find a Physician</h3>
<hr />Let us help you pick a doctor that fits your needs</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/paymybillicon.jpg" alt="Pay my Bill Icon" /></div>
<div class="text">
<h3>Pay My Bill</h3>
<hr />Conveniently pay your EJGH bill</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/myejghicon.jpg" alt="myEJGH.Org Icon" /></div>
<div class="text">
<h3>My EJGH.Org</h3>
<hr />See your up-to-date medical information</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/edocicon.jpg" alt="eDoc icon" width="75" /></div>
<div class="text">
<h3>eDoc</h3>
<hr />$49 Doctor visits via smartphone or online</div>
</div>
<div class="rTableRow">
<div class="icon"><img src="http://ejgh.org/images/stories/homepage/mdportalicon.jpg" alt="" width="75" /></div>
<div class="text">
<h3>EJGH MD Portal</h3>
<hr />Physician login for portal access</div>
</div>
</div>
<p></p>
<!--Start HL Table-->
<div class="hlbox">
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_memberbutton.png" alt="Image of Apple and Weights for homepage" width="100%"/></div>
<div class="HLtext">
<h3>Become a Member</h3>
<hr />
<p>Join Healthy Lifestyles and enjoy the benefits of membership.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_communitybutton.png" alt="Image of elderly couple at hospital in New Orleans Louisiana" width="100%" /></div>
<div class="HLtext">
<h3>Community Events</h3>
<hr />
<p>Learn more about the classes, events, support groups, and health screenings we offer.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_tvbutton.png" alt="Image of Liz Delsa Healthy Lifestyles Host" width="100%" /></div>
<div class="HLtext">
<h3>Watch TV Segments</h3>
<hr />
<p>Watch Healthy Lifestyles TV segments as seen on WWL-TV.</p>
</div>
</div>
<div class="HLrow">
<div class="HLicon"><img src="http://ejgh.org/templates/ejgh/images/hl_magbutton.png" alt="Summer 2016 Healthy Lifestyles Cover" width="100%" /></div>
<div class="HLtext">
<h3>Read the Magazine</h3>
<hr />
<p>Read the latest Healthy Lifestyles Magazine as included in the Times-Picayune newspaper.</p>
</div>
<!--End HL Table-->
</div></div>
<!--End Box Div—>
Also, the boxes around the HLdiv can go away - I just was using those to try to get an eye for what's pulling where.
Thanks again.
If I understood correctly, all you have to do is add display: table-cell; to the HLtextclass.
When using two div elements and the inline-block the two div's do not stand beside one another.
This is the code. (I configured some of the paragraphs and images to work better. I made sure the result was the same first though.)
<head>
<style>
#line {
display:inline-block;
margin-left:5%;
margin-right:75%;
border: 5px solid orange;
}
#TEST {
width:100%;
}
#pTxt {
text-align:center;
}
#heading {
color: red;
}
</style>
</head>
<body>
<div id="line">
<div>
<img id="TEST" alt="PICTURE" src="test.png" />
<div id="pTxt">
<h3 id="heading">
HEADING
</h3>
<p>TEST</p>
<br/>
<p>TEST</p>
</div>
</div>
</div>
<div id="line">
<img alt="PICTURE" id="TEST" src="test.png" />
<div id="pTxt">
<h3 id="heading">
HEADING
</h3>
<p>TEST</p>
<br/>
<p>TEST</p>
</div>
</div>
</body>
http://jsfiddle.net/gqfmmdy9/1/
Thanks in advance.
You are setting margin-right: 75%, which is pushing the next element to the bottom. You'll have to remove it.
Fiddle
#line {
display:inline-block;
margin-left:5%;
border: 5px solid orange;
}
#line {
display: inline-block;
margin-left: 5%;
border: 5px solid orange;
}
#TEST {
width: 100%;
}
#pTxt {
text-align: center;
}
#heading {
color: red;
}
<div id="line">
<div>
<img id="TEST" alt="PICTURE" src="test.png" />
<div id="pTxt">
<h3 id="heading">
HEADING
</h3>
<p>
TEST
</p>
<br/>
<p>
TEST
</p>
</div>
</div>
</div>
<div id="line">
<img alt="PICTURE" id="TEST" src="test.png" />
<div id="pTxt">
<h3 id="heading">
HEADING
</h3>
<p>
TEST
</p>
<br/>
<p>
TEST
</p>
</div>
</div>
#line {
display:inline-block;
margin-left:5%;
margin-right:75%;
border: 5px solid orange;
}
Your styles are working.
Try swapping margin-right:75%; for margin-right:2%;.
EDIT: Also, I suspect you need to give #line an explicit width declaration. Something like width:12%;.
If you want both the divs side by side, you can use <table> tag. See if this works for you.
<table>
<tr><td><div class="line">
<div>
<img class="TEST" alt="PICTURE" src="test.png"/>
<div class="pTxt">
<h3 class="heading">
HEADING
</h3>
<p>
TEST
</p>
<br/>
<p>
TEST
</p>
</div>
</div>
</div></td>
<td><div class="line">
<img alt="PICTURE" class="TEST" src="test.png"/>
<div class="pTxt">
<h3 class="heading">
HEADING
</h3>
<p>
TEST
</p>
<br/>
<p>
TEST
</p>
</div>
</div></td></tr>
</table>
and CSS
.line {
display:inline-block;
margin-left:5%;
margin-right:75%;
border: 5px solid orange;
}
.TEST {
width:100%;
}
.pTxt {
text-align:center;
}
.heading {
color: red;
}