I have a page with navigation menu on left and body on right. Actually body is consist of sections on all long.
I would like to display only this section which I click on the left navigation menu. I try to make something like that:
https://www.virtualbox.org/wiki/VirtualBox
Actually I have:
<div class="intro-body">
<div style="padding-top: 120px;" class="container">
<p class="intro-text">title</p>
<div id="content" class="row">
<div class="col-md-2">
<ul style="list-style-type: none;">
<li> FirstOne </li>
<li> Second </li>
<li> Second2 </li>
</ul>
</div>
<div class="col-md-10">
<section id="FirstOne">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim.
</p>
</section>
<section id="Second" style="padding-top: 60px;">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim. Curabitur sit amet velit nibh.
</p>
</section>
<section id="Second2" style="padding-top: 60px;">
<h2>title title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam est lorem, condimentum sed faucibus ac, aliquam vitae enim.
</p>
</section>
</div>
</div>
</div>
</div>
It's just the same design in all pages. You can use include to do ths or copy the code page to page. sorry on my bad english hope you understand.
Related
I have three columns inside a section tag in HTML but they sit on top of each other instead of standing next to eachother.
<section class="sec-top">
<div style="background-color:#f4f5f9">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="../../assets/apps.gif" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
I am not sure what I am doing wrong or why this is happening. Any help is appreciated. Thanks!
A div is a block-level element. That means that even if you reduce it's width it will still cause a new line to be created:
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can). https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
See also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow
You need to either change the display value of .column (or its parent) or remove it from the normal flow with a float.
See examples below.
In the first example, I added float:left to the column class. This removes each column from the normal flow and they are stacked to the left of the screen.
In the second example, I changed the container div to the flexbox model and added flex: 1 1 33% to each column. This will cause each column to always take up 33% of the width of the parent. Here is a great resource on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.column {
width: 33%;
float: left;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.gify {
max-width: 100%;
}
.flex-parent {
display: flex;
flex-direction:row;
}
.flex-parent>.column {
flex: 1 1 33%;
float: none;
}
<section class="sec-top">
<strong>Using Float</strong>
<div style="background-color:#f4f5f9;" class="clearfix">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="https://via.placeholder.com/450" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
<section class="sec-top" style="margin-top:30px">
<strong>Using FlexBox</strong>
<div style="background-color:#f4f5f9;" class="flex-parent">
<div class="column">
<h2 style="padding-left: 100px; padding-top:40px; color:#3d7cc9;">Lorem ipsum dolor sit amet.</h2>
<p style="padding-left:100px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac pharetra turpis. Sed vitae orci.
</p>
<ul class="checkmark">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Duis eu lorem ut risus sollicitudin bibendum.</li>
<li>uspendisse malesuada augue sit amet ipsum laoreet, eget consequat purus consequat.</li>
</ul>
</div>
<div class="column">
<img class="gify" src="https://via.placeholder.com/450" />
</div>
<div class="column">
<div class="backgroundBlue">
<h2 class="ptop">Lorem Ipsum</h2>
<h3>Lorem ipsum dolor sit amet.s</h3>
<iframe width="90%" frameborder="0"></iframe>
</div>
</div>
</div>
</section>
Is it possible to arrange images in different divs using something similar to display: flex and order?
I want to make a grid 2 rows x 3 columns with an exact order of the images.
Actually, I tried Order with each image but with no results and I don’t know any other method!
Also, I’d want to use only HTML/CSS.
<div class="section-c__container__column2">
<div class="section-c__container__sub-column1">
<div class="block-slack">
<img src="img/logo-slack.png" alt="slack" class="slack">
<div class="sub-block-slack">
<h3 class="section-c__container__sub-heading">Slack</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-gsuite">
<img src="img/logo-gsuite.png" alt="gsuite" class="gsuite">
<div class="sub-block-gsuite">
<h3 class="section-c__container__sub-heading">GSuite</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
<div class="section-c__container__sub-column2">
<div class="block-trello">
<img src="img/logo-trello.png" alt="trello" class="trello">
<div class="sub-block-trello">
<h3 class="section-c__container__sub-heading">Trello</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-asana">
<img src="img/logo-asana.png" alt="asana" class="asana">
<div class="sub-block-asana">
<h3 class="section-c__container__sub-heading">Asana</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
<div class="section-c__container__sub-column3">
<div class="block-salesforce">
<img src="img/logo-salesforce.png" alt="salesforce" class="salesforce">
<div class="sub-block-salesforce">
<h3 class="section-c__container__sub-heading">Salesforce</h3>
<p class="section-c__container__sub-par">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
<div class="block-typeform">
<img src="img/logo-typeform.png" alt="typeform" class="typeform">
<div class="sub-block-typeform">
<h3 class="section-c__container__sub-heading">Typeform</h3>
<p class="section-c__container__sub-par section-c__container__final-
sub">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id varius eros, vel pharetra est.</p>
</div>
</div>
</div>
</div>
</div>
Working on a container containing 6 <div>. I can position them in the center of the container, but wont flow to the middle with the text positioned below..
Would appreciate all the help i can get.
.services {
display: flex;
align-items: center;
}
<div class="subSection services">
<div class="box">
<img src="img/icon1.png">
<h3>ICON 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon2.png">
<h3>ICON 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon3.png">
<h3>ICON 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon4.png">
<h3>ICON 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon5.png">
<h3>ICON 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon6.png">
<h3>ICON 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
</div>
Explanation:
The reason why you're solution didnt work is because you were just aligning the items. Whereas you needed to align the content as well as justify the content to the center. furthermore, i have added flex direction in columns as your items are all one under the other - it will help with responsiveness when you want to adjust it later on.
Try the following:
.services{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
<div class="subSection services">
<div class="box">
<img src="img/icon1.png">
<h3>ICON 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon2.png">
<h3>ICON 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon3.png">
<h3>ICON 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon4.png">
<h3>ICON 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon5.png">
<h3>ICON 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
<div class="box">
<img src="img/icon6.png">
<h3>ICON 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi augue, viverra sit amet ultricies</p>
</div>
</div>
I was trying to make a simple website for school, but my footer background gets too big.
Here's my HTML
<div class="container-fluid">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>Portofolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="images/nature.jpg">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<div class="footer">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue. </p>
</div>
</div>
and Here is my CSS if anybody has any idea on how to fix it please tell me
i have tried to change sometihngs but my background keeps showing at the top
background-color:#d2d8e0;
}
nav {
background-color: #64f48a;
float: center;
padding: 20px 0px 0px 350px;
}
nav ul li {
padding: 0px 50px 20px 0px;
display: inline-block;
}
nav ul li a {
color: #f0f0f0;
}
nav ul li:hover {
background-color: black;
}
article {
padding: 0px 0px 0px 50px;
}
article img {
padding: 0px 0px 0px 50px;
}
article h1 {
text-align: center;
font-size: 20px;
padding: 0px 0px 0px 0px;
}
article p {
text-align: center;
font-size: 15px;
}
.footer {
background-color: red;
}
.footer p {
text-align: center;
color: #fff;
}
This is an issue with the float applied to bootstrap columns, you should wrap your columns with a row (See Grid System).
You could also add a display property to your footer like so or add a column to enclose your footer: <div class="col-md-12">.
.footer {
background-color: red;
display: inline-block;
width: 100%;
}
Working Example with add .row div.
nav {
background-color: #64f48a;
float: center;
padding: 20px 0px 0px 350px;
}
nav ul li {
padding: 0px 50px 20px 0px;
display: inline-block;
}
nav ul li a {
color: #f0f0f0;
}
nav ul li:hover {
background-color: black;
}
article {
padding: 0px 0px 0px 50px;
}
article img {
padding: 0px 0px 0px 50px;
}
article h1 {
text-align: center;
font-size: 20px;
padding: 0px 0px 0px 0px;
}
article p {
text-align: center;
font-size: 15px;
}
.footer {
background-color: red;
}
.footer p {
text-align: center;
color: #fff;
padding: 50px 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<nav>
<ul>
<li>Home
</li>
<li>Services
</li>
<li>Portofolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</nav>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
<article>
<div class="col-md-4">
<img src="http://placehold.it/150x150/000/fff">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.
</p>
</div>
</article>
</div>
<div class="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mattis erat, dignissim auctor magna. Cras placerat lorem at fringilla dapibus. Cras lobortis nec eros id congue.</p>
</div>
</div>
If you're planning to put a sticky footer at the bottom, you'll need need to add a bottom padding to the body so that it pushes the footer down. You'll also need to make sure you actually set a height on the footer.
If you want to learn more about how to do this, check out this post:
https://css-tricks.com/snippets/css/sticky-footer/
Remove the padding-bottom: 200px; from the .footer p
I'd like to have a button which responsively stays beside a paragraph, without the paragraph text wrapping around the button.
For example, here is the current code I am using:
<div class="myclass">
Button
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
This produces the following:
[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
What I want, is the following:
[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem
ipsum dolor sit amet, consectetur adipiscing elit.
I want it to remain this way no matter what the screen resolution is.
How would I accomplish this?
You can use Bootstraps Media Object to do this.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<div class="media">
<div class="media-left"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<hr>
<div class="media">
<div class="media-left media-middle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<hr>
<div class="media">
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="media-right media-middle"> Button
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-middle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="media-right media-middle"> Button
</div>
</div>
<hr>
<div class="media">
<div class="media-left media-midle"> Button
</div>
<div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
<hr>
Try keeping the button in different div and the paragraph in another one.
You tagged bootstrap so you can put the button and text in separate divs with column width settings. The number after the device width is divided by 12 for the width percentage. You can also add multiple device widths to improve responsiveness.
<div class="row myclass">
<div class="col-xs-4">
Button
</div>
<div class="col-xs-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
http://jsfiddle.net/zsenq6h6/
Ended up just using display: table and display table-cell for this. i.e.:
HTML:
<div class="filters">
<div class="cell">
Button
</div>
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tempus ante sit amet hendrerit. Nunc vel nunc id nibh rhoncus posuere. Nunc tincidunt nisi nec diam lacinia commodo. Quisque erat nisi, vulputate eget lacinia finibus, aliquet quis est. Vivamus at risus egestas, interdum erat ut, condimentum dui.
</div>
</div>
CSS:
.filters {
display: table;
}
.filters .cell {
display: table-cell;
vertical-align: top;
}
bootstrap is the best way to do this effect. if you don't want to use bootstrap then you can use the following code.
html :
<div class="myclass">
Button
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
css :
a {
width:10%;
display:inline-block;
vertical-align:top;
}
p{
width:70%;
display:inline-block;
margin-top:0 !important;
}
#media screen and (max-width:500px){
a {
margin-right:20px;
}
}
}
http://jsfiddle.net/souraj/d0u61xpg/
media query part is required when the resolution will be below 500px . otherwise there is no need to use it.