Here's a link to the codepen so far
The number of items in the gallery is based on search results, but I'd like the area to the right to be filled with a fixed area that will stay where it's at as the user scrolls down the search results gallery. So basically, the last 2 of 8 with a "card" styled the same as the gallery cards, but with a fixed-height to be about the height of 2 gallery cards. Hope that makes sense!
<div class="wrap">
<div class="compare-gallery">
<div class="gallery-item">
<div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
<div class="gallery-text">
<h5>2015</h5>
<h4>A title here</h4>
<p>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</p>
</div>
</div>
<div class="gallery-item">
<div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
<div class="gallery-text">
<h5>2015</h5>
<h4>A title here</h4>
<p>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</p>
</div>
</div>
<div class="gallery-item">
<div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
<div class="gallery-text">
<h5>2015</h5>
<h4>A title here</h4>
<p>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</p>
</div>
</div>
<div class="gallery-item">
<div class="gallery-image"><img src="http://fakeimg.pl/185x278/"></div>
<div class="gallery-text">
<h4>A title here</h4>
<p>How's this? Would it helped if I got out and pushed? It might. Captain Solo, Captain Solo...sir, might I suggest that you... It can wait. he bucket of bolts is never going to get us past that blockade. This baby's got a few surprises left in her, sweetheart. Come on! Come on! Switch over. Let's hope we don't have a burnout. See? Someday you're going to be wrong, and I hope I'm there to see it. Punch it!</p>
</div>
</div>
</div>
</div>
and the css:
#import 'susy';
#import 'compass';
#include border-box-sizing;
.compare-gallery {
#include clearfix;
margin-top: 80px;
}
.gallery-item {
background-color: rgba(255, 255, 255, 0.6);
#include box-shadow(0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23));
#include gallery(3 of 8 split);
margin-bottom: gutter(8);
.gallery-image {
float: left;
}
.gallery-text {
h5 {
float: right;
}
}
}
here's an image of where I'd like the 'floating' element to live:
You want to add a div that is fixed like:
.page-side {
position:fixed;
right:0px;
width: 200px;
}
the right:0px aligns the div to the right.
make sure your main div is not overlapping the right div.
basic example to show the idea.
Related
I'm trying to make a div with a width of 100vw to cover all viewing areas, however, it comes in a div with a margin, so I'm having trouble.
I've also included an image link below to help you understand.
* {
margin: 0%;
padding: 0%;
}
body {
background: black;
margin: 2rem 6rem;
color: white;
}
/* About Section */
.about {
display: block;
background-color: #2e3038;
margin-left: -6rem;
margin-right: 6rem;
}
<body>
<div class="about">
<div id="col1">
<h3>A co-founder at one of the world's largest communities.
</h3>
<p>
The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one
of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities.
</p>
</div>
<div id="col2">
<p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through
the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p>
</div>
</div>
</body>
As you can see, I attempted to use margin-right, however, it would not work.
I can't use inspect element since the design I'm attempting to replicate is in png format.
You're close - you've just specified the wrong direction for margin-right:
* {
margin: 0%;
padding: 0%;
}
body {
background: black;
margin: 2rem 6rem;
color: white;
}
.about {
background-color: #2e3038;
margin-left: -6rem;
margin-right: -6rem;
}
<body>
<div class="about">
<div id="col1">
<h3>A co-founder at one of the world's largest communities.
</h3>
<p>
The combined experience I have working at the top Fortune 500 companies has allowed me to develop a skill set that helps me in not just development but in every aspect of any business. <br> I'm proud to announce that I am now working at one
of the world's largest communities teaching young minds about how to sell themselves as a developer and open them to a whole new world of opportunities.
</p>
</div>
<div id="col2">
<p>As a developer, you have everything available to you and all that's holding you back is yourself. <br> A quote I live by perfectly illustrates what I mean. <br> "How big would you dream, if you knew you wouldn't fail?" You've already gone through
the hardest parts of being a developer, it's time to elevate your skills and become a leader in something you're passionate about. <br> I'm happy to chat over coffee some time about how I can help your company.</p>
</div>
</div>
</body>
Full Width Containers in Limited Width Parents | CSS-Tricks
I'd like my header to expand the same width as the entire div of the container so that it is one long block. I'm using Bootstrap 4 and the "cards" which replaced the old panels.
Unfortunately, my header isn't able to do that. I've tried manipulating the margins and padding in CSS, but that hasn't worked. You can see in the picture there is a sliver of white around the edges of the header. I want the white borders around the entire div of the container to keep it offset from other content, I just want the header element to cover it up.
For convenience, I've put a small border around the header element (h2) and the div which it sits inside.
#bio .container {
background-color: #fff;
border-radius: 10px;
padding-bottom: 4px;
}
.card-header {}
<div class="col-9 ml-2">
<section id="bio">
<!--bio section-->
<div class="container">
<div class="card-header" style="border: 1px solid black">
<h2 style="border: 1px solid green">Summary</h2>
</div>
<p class="card-text">
I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding
to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student."
<br />
<br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some
one concept in class, even in college. I frequently am recommended by parents to friends and family members.
</p>
</div>
</section>
It looks like there's just a bit of padding around your .card-header class. Below I set the left and right padding of the class to 0. Here's a CodePen to show it working with Bootstrap 4 included.
Feel free to let me know if I missed the point completely.
#bio .container {
background-color: #fff;
border-radius: 10px;
padding-bottom: 4px;
}
.card-header {
padding-left: 0;
padding-right: 0;
}
<div class="col-9 ml-2">
<section id="bio">
<!--bio section-->
<div class="container">
<div class="card-header" style="border: 1px solid black">
<h2 style="border: 1px solid green">Summary</h2>
</div>
<p class="card-text">
I am a UCI honors graduate in mathematics with a minor in computer science. I started tutoring as a favor for a friend and have found that tutoring is one of the most rewarding experiences I can have. Many of my students have gone from D's with no understanding
to A's with the ability to peer tutor their classmates. It is always wonderful to enter a student's home and hear "I got an A on the test!" or "the teacher says I am her most improved student."
<br />
<br /> I look for the concepts that students may not have totally grasped and help them get up to speed so that future classes are easy and fun. Most of my students continue to call me back on an "as needed" basis when they don't understand some
one concept in class, even in college. I frequently am recommended by parents to friends and family members.
</p>
</div>
</section>
Edit: This padding is caused by the .card-header class included with card.scss
I am doing a little exercise where I have to copy this
I am having some trouble to align the bullets like he does. My problem is that my content is aligned bot not the bullets.
Here it is
My HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3" id="left-box">
<h3 class="text-center">Some Favorites</h3>
<ul class="text-center">
<li>Celery Root</li>
<li>Spaghetti Squash</li>
<li>Killer Mushrooms</li>
</ul>
</div>
<div class="col-lg-9">
<h1>Wild & Wacky Vegetables</h1>
<p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
<p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
</div>
</div>
</div>
</body>
My CSS:
#left-box{
background-color: whitesmoke;
margin-top: 2%;
border: 1px solid white;
border-radius: 3px;
}
ul{
padding-left: 0;
}
ul li{
list-style-position: inside;
}
You need to remove the centering of the text inside your ul element:
<h3 class="text-center">Some Favorites</h3>
<ul>
<li>Celery Root</li>
<li>Spaghetti Squash</li>
<li>Killer Mushrooms</li>
</ul>
Here is a working example:
https://jsfiddle.net/m782jg44/1/
If you want to align the entire list - you will have to set it's width and center the container (the ul element, not the text).
Here is a working example:
https://jsfiddle.net/m782jg44/2/
Here is your updated code
#left-box{
background-color: whitesmoke;
margin-top: 2%;
border: 1px solid white;
border-radius: 3px;
}
ul{
padding-left: 0;
}
ul li{
list-style-position: inside;
}
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="left-box">
<h3 class="text-center">Some Favorites</h3>
<ul>
<li>Celery Root</li>
<li>Spaghetti Squash</li>
<li>Killer Mushrooms</li>
</ul>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"><h1>Wild & Wacky Vegetables</h1>
<p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
<p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
</div>
</div>
</div>
</body>
Remove class text-center from ul tag and try to change ul tag directly or using another class with this style.
ul {
display: table;
margin: 0 auto;
}
Example here: https://jsfiddle.net/lavdimxhelii/p93ccj07/
I have this two inline block text side by side but one them has one more paragraph and it mess up the text.
As you can see the "who we are" paragraph has weird height and i want to be potion same as "what we do" paragraph so it looks like this
This is my code
#wrapper {
width: 100%;
border: 1px solid blue;
text-align: left;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
display: inline-block;
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
<div id="content">
<h1>Who We Are</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
</div>
what do i need to do. i think there is already an topic for this but i don't know whats its called because English is not my first language.
Add the vertical align property to your #content element in your CSS code:
#content{
width:25%;
margin-left:15%;
font-size:16px;
display: inline-block;
vertical-align: top;
}
#wrapper {
width: 100%;
border: 1px solid blue;
text-align: left;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
display: inline-block;
vertical-align: top; /* <-------------------- your huckleberry */
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
<div id="content">
<h1>Who We Are</h1>
<span>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</span>
</div>
</div>
There are two solutions:
Solution One (Add vertical-align: top; in content class):
#content{
width:25%;
margin-left:15%;
font-size:16px;
display: inline-block;
vertical-align: top;
}
Second Solution:
Add inline css in first content div
<div id="content" style="float:left;">
A simple solution for this would be the following:
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
float:left;
}
You do not need to define width:100% for #wrapper, div is a block level element. You also don't need text-align:left; since text-align:left is the default rule for all element unless an upper level has a different align rule. display:inline-blocks is treated as a table cell, which by default has its value as "baseline", you can read from here http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Also, you should not be putting <p> inside of <span>, <span> is an inline block element and <p> is a block level element; Here is what I would do, it's simple and works and it is not based on hacks.
You may be more interested in the quick fix but its important to know the rules because hacks eventually collapse.
Hope this helps.
#wrapper {
border: 1px solid blue;
}
#wrapper:after {
content: '';
display:block;
clear:both;
}
#content {
width: 25%;
margin-left: 15%;
font-size: 16px;
float:left;
}
<div id="wrapper">
<div id="content">
<h1>What We Do</h1>
<div>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</div>
</div>
<div id="content">
<h1>Who We Are</h1>
<div>
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.</p>
<p>This is a great space to write long text about your company and your services.</p>
<p>This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.
</p>
</div>
</div>
</div>
Okay, so I've tried all the possible examples of implementing divs, floats, and in-lines to have all three tables side by side with nothing working. Here is the code I have programmed so far, please show me what I might be doing wrong. I could not figure it out after spending a good few hours trying different ways to input the coding
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="left;"><img src="http://wallpapershacker.com/wallpaper_3840x2160/clockwork_watches_clocks_time_desktop_1600x1200_hd-wallpaper-455121.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:verdana;font-size:10px;color:#636362;"><br>CLOCKWORK DREAMS.</br> This is where the machines rule. Whether it be an entire being augmented with robotics, or humans with mechanical adornaments. Those who embrace Science and obey its principles are welcomed here. >$[zone_1]</div></div>
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="center;"><img src="http://trucosyfondos.com/fondos-de-pantalla/data/media/10/Demon_angel.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:georgia;font-size:10px;color:#636362;"><br>TRANSCENDED.</br>Hell and Heaven have an existence, and this is where it dwells. Those who are monsters, saints, or perhaps even a hybrid of each thrive in this part of the world. >$[zone_2]</div></div>
<div align="left;"><div style="width:30%;auto;position;relative;background-color:#131313;border:2px solid #1b463d;"><div style="right;"><img src="http://orig10.deviantart.net/8658/f/2007/202/9/b/human_reflection_by_yudha3.jpg" style="max-width:100%;">
<div style="width:100%;height:100%;overflow:auto;background-color:#111111;text-align:float:left;justify;font-family:sylfaen;font-size:10px;color:#636362;"><br>THE ENIGMATIC</br>What does it mean to be human? The idea of freedom and independance has long been sought for, and here is where those ideals exist. >$[zone_3]</div></div>
UPDATED
Look at this:
https://jsfiddle.net/fh2st5nm/2/
html:
<div class="oneThird">
<img src="http://wallpapershacker.com/wallpaper_3840x2160/clockwork_watches_clocks_time_desktop_1600x1200_hd-wallpaper-455121.jpg" />
<p>CLOCKWORK DREAMS.<br> This is where the machines rule. Whether it be an entire being augmented with robotics, or humans with mechanical adornaments. Those who embrace Science and obey its principles are welcomed here. >$[zone_1]</p></div>
<div class="oneThird">
<img src="http://trucosyfondos.com/fondos-de-pantalla/data/media/10/Demon_angel.jpg" />
<p>TRANSCENDED.<br>Hell and Heaven have an existence, and this is where it dwells. Those who are monsters, saints, or perhaps even a hybrid of each thrive in this part of the world. >$[zone_2]</p></div>
<div class="oneThird">
<img src="http://orig10.deviantart.net/8658/f/2007/202/9/b/human_reflection_by_yudha3.jpg" />
<p>THE ENIGMATIC<br>What does it mean to be human? The idea of freedom and independance has long been sought for, and here is where those ideals exist. >$[zone_3]</p></div>
css:
.oneThird {
width: 33%;
float: left;
background-color: #111;
text-align: justify;
font-family: sylfaen;
font-size: 10px;
color: #636362;
}
.oneThird img {width: 100%;}
.oneThird p {padding: 3px;}
here you dont need css also you should have one main div with width 100% and its children are have style float=left likebelow
<div id="maindiv">
<div class="inline">div 111111111111111111 </div>
<div class="inline">div 2222222222222222222 </div>
<div class="inline"> div 33333333333333333333333</div>
</div>
css..........
.inline{
float:left
}