On my website i have a gray test image and i need to position it next to my image slider. I have tried putting them in the same div but it hasnt worked out as well as i though it would. Could someone show me how to do this within my code. I am new so i am confused with this more than others would be.
Thanks!
My website: http://rootforsite.azurewebsites.net/
Press f12 for code. The image slider and the image are near the bottom.
You can change the div css to include (in this case it should be the div with the id "containers" I think)
display: inline-block;
or since you're using lovely bootstrap you can add classes to both the divs to keep them lovely and gridified! :)
E.g.
<div id="container" class="col-xs-6">...</div>
<div id="containers" class="col-xs-6">...</div>
HTML
<div id="container">
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS
#container
{
width: 300px;
height: 300px;
background-color: yellow;
}
.inner
{
width: 100px;
height: 100px
float: left;
background-color: blue;
}
Related
I'm stuck at some point. I'm trying to do a three-column page layout. The Middle section is for posts, the right section is for some other links and references and so (A bit long). Left is fixed.
My question is;
How can I stop the right div from moving when it reaches its bottom? And if the middle div's content is shorter then the right also has a scrollbar for the page for the right div. Just like Twitter does.
I tried to do some brainstorming. And thought maybe Twitter makes double divs for those sections. One is normal, the other is the fixed bottom it. So normal one stretches the page for scrolling, and the other one sticks on top of it. But I'm not sure if I'm right.
Or is it possible with pure CSS? (Also I'm using TailwindCSS)
Anyway; here is a presentation of my thought. (Or you can simply look at twitter homepage feed)
Also here is a gif;
click
You can use the following CSS code in the element which needs to stop
position: sticky;
bottom: 0
Refer to the following post on Stackoverflow for more information How does the "position: sticky;" property work?
Hope this answers your question!
Edit: [Try this out]
.main {
width: 100%;
height: 1000px;
display: flex;
}
.first {
width: 30%;
background-color: red;
}
.second {
width: 40%;
background-color: green;
}
.third {
width: 30%;
background-color: blue;
height: 500px;
position: sticky;
top: 0px;
}
p {
margin-left: 20px;
}
<div class="main">
<div class="first">
<p>
Left content.
</p>
</div>
<div class="second">
<p>
Main content.
</p>
</div>
<div class="third">
<p>
Right content.
</p>
</div>
</div>
I'm trying to replicate the effect of the footer from this website:
http://www.terradatbroker.com
In essence what it does is like the image at the top, the image stays fixed while the viewport of the div or section scrolls. I'd like the same with a div or footer block filled with content so that when reaching the footer, the lower part of the footer is revealed first, letting the content div slide upward while scrolling down. I hope this describes it clearly.
Here's what I've got so far:
HTML snippet:
<div class="row content-filler">
Content 1
</div>
<footer>
<div class="footer">
<h1 class="">Footer</h1>
</div>
</footer>
CSS snippet:
footer {
background-color: #444;
min-height: 350px;
color: #fff;
margin: 0px;
padding: 0px;
z-index: 1;
}
.footer {
margin: 0px;
padding: 0px;
background-color: #444;
position:fixed;
top: 800px;
z-index: 1;
}
Here's a jsfiddle with the full source code:
https://jsfiddle.net/DTcHh/39204/
I've searched many bootstrap themes but I couldn't find one that does this effect. I've also looked at the css but I suspect it may be done using javascript, which is minified and unreadable. Can anyone shed some light on how this is done?
Check this https://jsfiddle.net/DTcHh/39205/
Footer is fixed with bottom:0
The last div.row has a margin-bottom, for give space to the footer.
Hope it helps, cheers.
I'm working on a little CSS/HTML project and I'm running into a wall. Hoping I can get some help here. Here is a link to the UI I'm working on: http://imgur.com/a/yKXk9
What I'm trying to do is have that Projects header sticky to the top of that container div, and have all the items scroll beneath it without overlapping with the header.
This is the CSS I have for my container:
.projectContainer {
background-color: rgba(0, 0, 0, 0.15);
width: 30%;
height: 50%;
border-radius: 2em !important;
margin: 1em;
overflow-y: auto;
position: relative;
}
And this is the CSS I have for the header.
.projectHeader {
position: absolute;
padding-left: 35%;
top: 0;
height: 1.5em;
}
EDIT: I also added a bit of the HTML I'm using:
<div class = "projectContainer">
<div class="name projectHeader">Projects</div>
<div class="projectThumbnail">
<a href="http://lunchline.herokuapp.com" target="_blank">
<i class="fa fa-cutlery fa-3x"></i>
<p>LunchLine</p>
</a>
</div>
MORE PROJECT THUMBNAILS HERE
</div>
This obviously doesn't work as the header scrolls just like everything else. I tried using position: sticky on the header, and the problem with that was that all the content scrolled BENEATH the header text instead of neatly ending at the bottom of the header div. If anyone can guide me in the right direction I'd be very grateful.
Also, as a sidenote: is there a way to get rid of that gotdawful scrollbar and just have the thumb appear (and only appear when I'm actually scrolling)?
Thanks everyone.
EDIT:
Here is a JS Fiddle. https://jsfiddle.net/ksy6ahL0/
I tried stripping it down to just the container and stuff so it looks messy but I think it basically shows what I'm trying to do.
I think your biggest problem is that you put the overflow on the main div, not on the content div.
.container{
background:gray;
color:white;
width:400px;
height:400px;
display:flex;
flex-direction:column;
}
.content{
flex:1;
overflow:auto;
}
<div class="container">
<h1 class="header">header</h1>
<div class="content">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div>
</div>
If you look at this page: http://www.groenesmoothiehandboek.nl/sp/ you will see that the video is slightly offcenter.
You will also see there is a counter (flipclock.js) above. To call the counter we use this code:
<div style="width:100%; background:url(img/bg-countdown.png) center top no-repeat; height:140px; margin:0 auto; z-index:9999;">
If i delete this part, the video centers perfectly.
I am already trying to fix this little bug for over an hour without success.
Does anyone know how i can maybe fix this?
Thanks in advance!
If you wrap this div:
<!-- notice no height attribute here -->
<div style="width:100%; background:url(img/bg-countdown.png) center top no-repeat; margin:0 auto; z-index:9999;">
<!-- stuff from inside this div -->
</div>
inside of this div:
<div style="height: 140px;">
<!-- Place the entire div from above here -->
</div>
Your problem is fixed.
Picture: http://i.imgur.com/HBiLUOz.png
I think ive fixed this one for you:
Add float: left to the wrapper of the counter. (the one with these properties
{
width: 100%;
background: url(img/bg-countdown.png) center top no-repeat;
height: 140px;
margin: 0 auto;
z-index: 9999;
}
Add these to the div underneath it
width: 100%;
float:left;
(the div with these properties):
background:url(img/bg-vid.jpg) center top no-repeat;
height:878px;
max-width:1920px;
margin:0 auto;
should be fixed. I strongly suggest you work with classes and id's to add CSS :). It's more readable that way. Good Luck with the smoothies ;)
I've been trying this for a while with no luck. I have a parent <div> tag (lets say it's set to 300px in width). I am trying to add a series of smaller <div> tags to go inside the parent, and be placed side by side until the edge of the parent <div> where the next child <div> will then be placed on the "next line". Basically, I am trying to make these child <div> tags act like words being word wrapped.
I have googled this like crazy, but I can't find any way to really do this without calculating the sizing of everything and manually placing the child <div>'s with absolute coordinates, which I can do, but I'd like to avoid. Sp first, I was wondering if there was a css or javascript approach that could supply the same behavior.
The number of child divs is variable, and I am using C# server side code to calculate them. But it shouldn't matter which server language I'm using.
Thanks!
Try this:
Approach 1
Use display: inline-block;
HTML:
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS:
html, body { height: 100%; }
#parent {
background-color: lightblue;
width: 300px;
height: 100%;
}
.child {
width: 50px;
height: 100px;
display: inline-block;
background-color: red;
}
Demonstration.
<hr>
<h2>Approach 2</h2>
Use float: left;
HTML:
<div id="parent">
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
</div>
CSS:
html, body { height: 100%; }
#parent {
background-color: lightblue;
width: 300px;
height: 100%;
}
#child {
width: 50px;
height: 100px;
float:left;
background-color: red;
margin: 2px;
}
Demonstration.
Floating is a totally reasonable way to do it.
Alternatively you could use elements with CSS display:inline or display:inline-block . Both are automatically positioned by the browser as you describe, side-by-side and "wrapping" when they run out of space. The difference is that inline elements don't give you as much control over padding, dimensions etc., whereas inline-block elements give you all the perks of a display:block element. However IE6 does have some difficulty with inline-block elements, as I recall, which is irritating.
If you want to use inline elements, just switch your child divs to spans: spans are inline by default, no further work necessary. However there are no elements that display inline-block by default, so if you need to use this you may as well keep your divs.
Hopefully you have some options there.
Why don't you just float: left the child divs?