I'm having trouble floating two images to the right of another div element containing a header, text, and a link. I can get the images to float right to one of these things, but not all three.
.feature1 {
width: 800px;
margin-bottom: 30px;
margin-top: 140px;
text-align: right;
background-color: cyan;
display: inline-block;
overflow:hidden;
}
.featuresimg {
float:right;
}
<main class="features">
<div class="feature1 clearfix">
<div>
<img src="assets/image1.jpg">
<img src="assets/image2.jpg">
</div>
<div>
<h4 class="feature-head">FEATURE</h4>
<h3 class="feature-text">Donec ultrices interdum diam Nam ut est</h3>
SEE MORE
</div>
</div>
Really new to this, so appreciate any help. I've been looking at other people's questions, and can't find an answer that fits what I'm trying to do.
I would suggest using flexbox. It is generally a better way than float of positioning things horizontally. A good guide to this can be found here.
.feature1 {
display: flex;
flex-direction: row;
width: 800px;
margin-bottom: 30px;
margin-top: 140px;
overflow:hidden;
text-align: right;
background-color: cyan;
}
.feature1 > div {
flex: 1;
}
<main class="features">
<div class="feature1 clearfix">
<div>
<h4 class="feature-head">FEATURE</h4>
<h3 class="feature-text">Donec ultrices interdum diam Nam ut est</h3>
SEE MORE
</div>
<div>
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
Float images to the right
.feature1{
width: 800px;
margin-bottom: 30px;
margin-top: 140px;
text-align: left;
background-color: cyan;
display: block;
overflow:hidden;
}
.feature1 img {
display: block;
margin-right: 10px;
float:right;
height: 100px;
width: 100px;
}
main class="features">
<div class="feature1 clearfix">
<div>
<img src="https://cdn.pixabay.com/photo/2017/01/16/15/18/soap-bubble-1984310__340.jpg">
<img src="https://cdn.pixabay.com/photo/2012/07/07/06/39/bubbles-51675__340.jpg">
</div>
<div>
<h4 class="feature-head">FEATURE</h4>
<h3 class="feature-text">Donec ultrices interdum diam Nam ut est</h3>
SEE MORE
</div>
</div>
</main>
Related
I'm trying to center an image gallery with a lists background symmetrically. No matter the size of the browser. What are some ways I can symmetrically align content
I tried setting a wrapper around the list and the gallery and setting a fixed width but it only changes my image size and not the list background size. I also tried having a float but it changes around everything.
.months {
display: inline-block;
text-align: justify;
color: #808080;
width: 44.4%;
margin-top: 25px;
}
.months ul {
list-style-type: none;
}
.months li {
background-color: #ffffff;
padding: 16px;
border-bottom: 1px solid #808080;
}
.tourCities {
display: inline-block;
width: 260px;
margin: 15px;
background-color: #ffffff;
}
.tourCities img {
width: 100%;
height: auto;
}
http://jsfiddle.net/xza7g439/
I have included a jsfiddle of the code to keep everything neat.
https://imgur.com/a/PnIzxnp This is what I wanted to achieve
https://imgur.com/a/dDt27UE but this is what I get and it doesn't look right hurts my OCD.
You can do this:
CSS
body {
background-color: #000;
box-sizing: border-box;
}
.wrapper{
display: inline-block;
width: 500px; //Set the size here what you want (px, %)
position: relative;
left: 50%;
transform: translateX(-50%);
}
.months {
display: inline-block;
text-align: justify;
color: #808080;
width: 100%;
margin-top: 25px;
}
.months ul {
list-style-type: none;
margin:0;
padding:0;
}
.months li {
background-color: #ffffff;
padding: 16px;
border-bottom: 1px solid #808080;
}
.tourCities {
display: inline-block;
width: calc(50% - 8px);
background-color: #ffffff;
vertical-align: middle;
float: left;
margin: 16px 0px;
}
.cities .tourCities:nth-child(2n+0) {
margin-right:0;
margin-left: 16px; //pixel perfection
}
.tourCities img {
width: 100%;
height: auto;
}
.desc {
text-align: justify;
padding: 5px;
}
.date{
font-weight: 100;
color: #808080;
}
.smlBtn {
color: #ffffff;
background-color: #000000;
border-style: none;
padding: 14px;
}
HTML
<div class="wrapper">
<div class="months">
<ul>
<li>September</li>
<li>October</li>
<li>November</li>
</ul>
</div>
<div class="cities">
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="New york" width="245" height="184">
<div class="desc">
<p>
<b>New York</b>
</p>
<p class="date">Fri 27 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="Paris" width="245" height="184">
<div class="desc">
<p>
<b>Paris</b>
</p>
<p class="date">Sat 28 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="San Francisco" width="245" height="184">
<div class="desc">
<p>
<b>San Francisco</b>
</p>
<p class="date">Sun 29 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
</div>
</div>
DEMO HERE
I have deleted a 4th box as i only need 3 and want the centre the 3 boxes. Here is an image. This is my CSS Code. Below is the HTML code, Keeps saying there is too much code so I am filling up this part with more text so hopefully I can get some help at some point, hopefully this is enough text to code now ?
#featured-wrapper {
overflow: hidden;
padding: 5em 0em;
background: #FFF;
}
#featured h2 {
text-align: center;
}
#featured .icon {
position: relative;
display: block;
background: #2A70E8;
margin: 0px auto 20px auto;
line-height: 2.5em;
font-size: 4em;
text-align: center;
color: #FFF;
}
.column1,
.column2,
.column3,
.column4 {
width: 282px;
}
.column1,
.column2 {
float: left;
margin-right: 24px;
}
.column3 {
float: left;
}
.column4 {
float: right;
}
<div id="featured-wrapper">
<div id="featured" class="container">
<div class="major">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Cras vitae metus aliquam risus pellentesque pharetra</span>
</div>
<div class="column1">
<span class="icon icon-bar-chart"></span>
<div class="title">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column2">
<span class="icon icon-qrcode"></span>
<div class="title">
<h2>Praesent scelerisque</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column3">
<span class="icon icon-building"></span>
<div class="title">
<h2>Fusce ultrices fringilla</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
</div>
</div>
we need to see your HTML to give You a correct Answer
but try this
replace this code
#featured-wrapper {
overflow: hidden;
padding: 5em 0em;
background: #FFF;
}
with this
#featured-wrapper {
width:900px;
margin:0 auto;
overflow: hidden;
padding: 5em 0em;
background: #FFF;
}
and you can change this number 900
with the best width for the HTML
Try wrapping the 3 columns in a div with a columnwrap class like:
.columnwrap {
width: 846px; //width of your 3 columns combined, add px for padding if needed
margin: auto;
}
then:
<div class="columnwrap">
<div class="column1"></div>
<div class="column1"></div>
<div class="column1"></div>
</div>
You are going to need to clearfix the three floats before the closing div tag on the columnwrap. This should do the trick.
you can avoid float and use .column {display:inline-block} + .parent .column {text-align:center}.
Snippet to test below
#featured-wrapper {
overflow: hidden;
padding: 5em 0em;
background: #FFF;
text-align:center;/* new */
}
#featured h2 {/* cleaned up */
}
#featured .icon {
position: relative;
display: block;
background: #2A70E8;
margin: 0px auto 20px auto;
line-height: 2.5em;
font-size: 4em;
text-align: center;
color: #FFF;
}
.column1,
.column2,
.column3,
.column4 {
width: 282px;
display:inline-block;/* new instead float*/
margin:0 10px;/* update*/
}
.column1,
.column2 {/* cleaned up */
}
.column3 {/* cleaned up */
}
.column4 {/* cleaned up */
}
<div id="featured-wrapper">
<div id="featured" class="container">
<div class="major">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Cras vitae metus aliquam risus pellentesque pharetra</span>
</div>
<div class="column1">
<span class="icon icon-bar-chart"></span>
<div class="title">
<h2>Maecenas lectus sapien</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column2">
<span class="icon icon-qrcode"></span>
<div class="title">
<h2>Praesent scelerisque</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
<div class="column3">
<span class="icon icon-building"></span>
<div class="title">
<h2>Fusce ultrices fringilla</h2>
<span class="byline">Integer sit amet aliquet pretium</span>
</div>
</div>
</div>
</div>
I'm having difficulties in aligning these elements side by side, anyway this—
—is how it looks so far, but I want it look like this:
.reviewprofile {
background-color: transparent;
border: none;
margin-top: 5em;
}
.reviewentry {
display: inline-block;
font-family: 'Abhaya Libre', Times, Serif;
font-size: 0.8em;
font-weight: 400;
color: #5e5e5e;
text-align: left;
padding-left: 3.5em;
margin: 0;
}
.commbutton button {
float: left;
}
.starsrev {
padding-left: 2.8em;
}
<div class="commsec">
<div class="commbutton">
<button class="reviewprofile"><img src="img/reviewprofile.png"> </button>
</div>
<div class="commentry">
<p class="reviewentry">Cras ultricies dolor ac justo scelerisque, sit amet imperdiet<br> purus placerat.</p>
<img class="starsrev" src="img/stars.png" alt="stars" />
</div>
</div>
flex on the parent will create this layout with your existing markup. Here's a visual guide for help with syntax/options https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.reviewprofile {
background-color: transparent;
border: none;
}
.reviewentry {
font-family: 'Abhaya Libre', Times, Serif;
font-size: 0.8em;
font-weight: 400;
color: #5e5e5e;
text-align: left;
margin: 0;
}
.commsec {
display: flex;
align-items: center; /* this will affect vertical alignment */
}
<div class="commsec">
<div class="commbutton">
<button class="reviewprofile"><img src="http://cdn.quilt.janrain.com/2.1.2/profile_default.png"> </button>
</div>
<div class="commentry">
<p class="reviewentry">Cras ultricies dolor ac justo scelerisque, sit amet imperdiet<br> purus placerat.</p>
<img style="max-width: 100px" class="starsrev" src="http://www.moviesmacktalk.com/news/wp-content/uploads/2013/11/2.5-Stars.jpg" alt="stars" />
</div>
</div>
you can try floating them. thats what i usually do.
.commbutton{
float:left;
}
.commentry{
float:left;
}
Apply float:left to the div which you want to show on the left and apply float: right for the one to be shown on the right. That's the starting point. Based on results you may have to change them to be inline too.
Please add under CSS & check
img {
float: left;
}
I didn't run the code.
I've got this irritating horizontal scroll on my bootstrap page. Can't figure out what is making it behave like this or what to do about it?
JsFiddle link: http://jsfiddle.net/FatAlbert/cd1syrd9/2/
HTML:
<body>
<div class="wrapper">
<div class="row">
<div class="header">
<div class="container">
<!-- navigation-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Meny</button>
<a class="navbar-brand" href="#"><img src="xxx" /></a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Start <span class="sr-only">(current)</span></li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav><!-- / navigation-->
</div>
</div><!-- / header-->
</div><!-- / container-->
<div class="row">
<div class="first-page-content">
<div class="container">
<img class="img-responsive img-big" src="xx" />
<p>
Lorem ipsum dolor sit amet, arcu nulla. Maecenas congue, felis leo et, pulvinar sollicitudin lacinia libero rhoncus, nam dolor, velit leo ullamcorper massa. Risus netus facilisis tempus mollis, nullam nibh ridiculus potenti donec pulvinar proin. Sit in ultrices sed orci pellentesque, nunc tempor fusce fusce ultrices felis molestie. Lorem nam pellentesque integer urna nam.
</p>
</div>
</div>
</div><!--/first-content-->
</div>
<div class="footer">
<div class="container">
<p class="pull-right">
Some<br />
Info<br />
</p>
</div>
</div><!-- /footer-->
</body>
CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 160px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.5em;
}
p {
font-family: Verdana,Arial,sans-serif;
font-size: 1.05em;
line-height: 1.8;
text-align: justify;
}
a {
color: #0071BB;
font-weight: bold;
}
.wrapper {
}
.footer {
position: absolute;
padding-top: 25px;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 160px;
background-color: #5FC8FF;
}
.header .glyphicon-wrench {
margin: 0 3px;
}
.header h4 {
margin-right: 3px;
}
.img-responsive {
display: block;
margin: auto;
}
.img-responsive.img-big {
margin-top: 75px;
}
.navbar {
border: none;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-default .navbar-nav > li {
width: 150px;
margin-right: 2px;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover {
color: #fff;
font-weight: bold;
background-color: #92C7E1;
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #98CEE5;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #98CEE5;
}
a.navbar-brand {
padding: 5px;
}
.row {
}
.alert {
}
.well {
}
.footer p {
font-weight: bold;
color: #FDFDFB;
}
#media (min-width: 992px) {
}
#media (min-width: 768px) {
.first-page-content p {
margin: 75px auto 25px auto;
width: 524px;
}
}
As per Bootstrap 3 documentation:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Therefore, add the class container to your .wrapper element.
Updated Example
<div class="wrapper container">
<div class="row">
...
</div>
</div>
As for an explanation, the .row class has -15px margins on each side.
.row {
margin-right: -15px;
margin-left: -15px;
}
The .container class effectively displaces that with the following:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
In addition to reading the Bootstrap 3 docs, I'd suggest reading the article "The Subtle Magic Behind Why the Bootstrap 3 Grid Works".
Just copy this code to your CSS, it will disable your horizontal scroll bar.
body {overflow-x: hidden;}
Writing:
html, body {
max-width: 100%;
overflow-x: hidden;
}
in your CSS, is a way to solve this issue
Copy and paste this in CSS code
html, body {
overflow-x: hidden;
}
Setting overflow-x: hidden; works but it will affect scrolling events. Putting rows within the container worked for me.
The issue is basically caused due to the parent .container is missing. The solution is that you can add a .no-container class to the row and add margin: 0 to compensate the negative margin of the row class.
See the below CSS and HTML markup code:
.no-container {
margin-left: 0 !important;
margin-right: 0 !important;
}
.row {
border: 1px solid #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--<div class="container"> Container is commented -->
<div class="row no-container">
<div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
<div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
</div>
<!--</div> Container ends here -->
In my case, I had one container-fluid class div tag in another container-fluid class div tag. Removing one of them fixed the issue.
Try this! It works for me.
.col-12{
padding-right: 0!important;
padding-left: 0!important;
}
.row{
margin-right: 0px;
margin-left: 0px;
}
I'm trying to make these 4 images to be circle but I guess I'll just use images later but anyway. I'm trying to put a title under the image (bottom-middle) but instead its at the top. This is what happened.
.services img{
border-radius: 50%;
padding-left: 10px;
float: left;
display: block;
}
<section class="services">
<h1 style="text-align:center; font-size:38px;">Services we offer</h1>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
<div class="circle">
<img src="http://placehold.it/290x250">
<h3>Title</h3>
</div>
</section>
So it'd look like my design.
You need also to set the .circle class to float left:
.circle
{
width: 25%;
float: left;
}
http://jsfiddle.net/yh988n5e/
.circle{
text-align: center;
display: inline-block;
}
.services img{
border-radius: 50%;
padding-left: 10px;
display: block;
}
http://jsfiddle.net/mx7xknzr/1/