I want to move down the red div like my example but I still get extra space above the image div (class two), like the red div is still there in the top of the page.
How can I solve this in a better way? I don't want to use absolute position because my site is responsive and set the Image div (class two) to top: -50px sounds like bad solution.
.one {
top: 100px;
position: relative;
width: 100px;
height: 50px;
background-color: red;
}
<div class="one">Some text</div>
<div class="two">
<img src="http://via.placeholder.com/350x350">
</div>
.one {
top: 100px;
position: relative;
width: 100px;
height: 50px;
background-color: red;
margin-bottom: -50px;
}
<div class="one">Some text</div>
<div class="two">
<img src="http://via.placeholder.com/350x350">
</div>
Related
I have a vertical line running down the middle of my page, but it only goes as far as the first section. What I want it to do is run all the way down to the very end of the page when you scroll all the way down. I'm not sure how to achieve this.
Right now my CSS for my line is this:
.line{
position: absolute;
top: 100px;
margin: auto;
width: 50%;
height: 100%;
border-right: 1px dotted black;
}
I don't want to have a set height, because as I start adding more projects to the site, I would like the line to grow with the page without having to change the height every time.
Here's a codepen: https://codepen.io/Furr/pen/gJLapb
This website is my inspiration, I would like it to be something like this: https://www.rezo-zero.com/projects/
Thanks in advance.
I think you may actually want 3 divs like this. ( the line is a div)
.vl {
border-left: 1px dotted black;
height: 500px;
}
#parent {
display: flex;
}
#right {
width: 300px;
margin-left: 5px;
}
#left {
flex: 1;
}
<div id="parent">
<div id="left">Left Side</div>
<div class="vl"></div>
<div id="right">Right Side</div>
</div>
another reason to have 3 divs is that you can "break up" the line with clickable content just like in your example
One of feasible way is to use pseudo element to make the vertical line so that it will expand according to the container. Here is an simple example.
.timeline-container {
position: relative;
width: 500px;
margin: 0 auto;
}
.timeline-container:after {
content: " ";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: #000;
}
.timeline-container .event {
width: 50%;
}
.timeline-container .event.left {
text-align: right;
}
.timeline-container .event.right {
margin-left: 50%;
}
.timeline-container .event-content {
margin: 10px;
}
<div class="timeline-container">
<div class="event left">
<div class="event-content">2019-05-14<br>Testing Events</div>
</div>
<div class="event right">
<div class="event-content">2019-05-10<br>Another Events</div>
</div>
<div class="event left">
<div class="event-content">2019-04-25<br>Great Exhibition</div>
</div>
<div class="event right">
<div class="event-content">2019-03-27<br>School Festival</div>
</div>
</div>
You can look at the source code for the website you wanted to emulate by typing CTRL + SHIFT + I in Chrome after opening it.
I play with floats and I noticed then "float collapse bug" does not arise with fixed position. Here is example.
So I have two divs:
<body
<div class="static">
<img>
<p>text text text</p>
</div>
<div class="fixed">
<img>
<p>text text text</p>
</div>
</body>
First with static position and second with fixed:
.fixed, .static{
outline: 1px solid black;
width: 150px;
}
.fixed{
position: fixed;
left: 200px;
top: 200px;
}
img{
float: right;
background-color: green;
width: 100px;
height: 100px;
}
And result:
So why the second fixed-div does not need something like .clearfix to fix float collapse?
Because position: fixed; creates Block formatting context.
Try the below styles also, which have similar effect in your div.
float
position absolute and fixed
display - inline-blocks, table, table-cells
overflow - hidden, auto
if you want them both to appear the same you can put in overflow-y:hidden;
https://jsfiddle.net/1nq8b7xs/3/
or if you want them to appear beside each other use display:inline-block and remove position-fixed from your fixed class
https://jsfiddle.net/1nq8b7xs/4/
.fixed, .static{
outline: 1px solid black;
width: 150px;
overflow-y:hidden; /*added this*/
}
.fixed{
left: 200px;
top: 200px;
}
img{
float: right;
background-color: green;
width: 100px;
height: 100px;
}
.fixed, .static{display:inline-block;}
<body>
<div class="static">
<img>
<p>text text text</p>
</div>
<div class="fixed">
<img>
<p>text text text</p>
</div>
</body>
I am using bootstrap and the page width is NOT fixed.
I would like to display a contact form div (grey box below) like this:
So the grey contact form is sort of floating over the blue and white divs.
Thanks!
Here's what I have been trying to do: http://jsfiddle.net/w69j4xam/
<div class="header">
Header
</div>
<div class="content">
<div class="bluediv">
Some text here
</div>
<div class="whitediv">
Some more text here
</div>
<div class="contactform">
Contact Form<br/><br/><br/><br/>
</div>
</div>
body{
padding: 20px;
}
.header{
height: 50px;
background-color: green;
}
.content{}
.bluediv{
height: 150px;
background-color: #AFEEEE;
}
.whitediv{
height: 180px;
background-color: #FFF;
}
.contactform{
background-color: grey;
width: 100px;
position: absolute;
}
In terms of your jfiddle example, all you need to add is a right and a top.
.contactform{
right:50px;
top:100px;
background-color: grey;
width: 100px;
position: absolute;
}
http://jsfiddle.net/w69j4xam/2/
Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.
<style type="text/css">
.inner {
position: absolute;
}
</style>
<div class="outer">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
<div class="inner">4</div>
</div>
I have three divs that I am trying to put on a single line. I want one to always snap left, and I want one to always snap right. The third one, which the display will be toggled using javascript, has to always be center. I've tried float. I've tried display:inline-block. Nothing works. Below is my code, any help would be greatly appreciated.
<div id="header" class="AppBackColor" style="color:#FFFFFF; padding:2px; width:100%; height:34px;">
<div style="height:100%;display:inline-block;float:left;">
<img src="Images/Logo/uss_logo_white.gif" height="30px" width="31px" alt="USS" />
<label>Change Control</label>
</div>
<div id="TimeoutWarning" style="height:100%; width:450px;display:inline-block;margin:0 auto;">Your session will expire in <label id="lblSessionCountDown">5:00</label>. Click <a style="color: Red;" href="#" onclick="ResetSession();void(0);">OK</a> to continue your session.</div>
<div style="height:100%;display:inline-block;float:right;">
<label>User:</label>
<asp:Label ID="lblUser" runat="server"></asp:Label>
<asp:ImageButton ID="btnLogout" runat="server" BorderStyle="None" ImageUrl="~/Images/Logout-icon.png" onclick="btnLogout_Click" Height="30px" Width="30px"/>
</div>
You can use absolute positioning like this:
.container {
position: relative;
width: 100%;
height: 50px;
}
.first {
width: 100px;
height: inherit;
position: absolute;
left: 0;
background-color: #FAA;
}
.second {
width: auto;
height: inherit;
position: absolute;
top: 0;
margin-left: 100px; // 1st div width
margin-right: 200px; // 3rd div width
background-color: #AFA;
}
.third {
width: 200px;
height: inherit;
position: absolute;
right: 0;
top: 0;
background-color: #AAF;
}
And then use a <div class="container"> which has inside the 3 divs with classes first, second and third.
If you set the margins of the second equals to the with of the first and third, like in the sample, it will fill up all the space.
You can look at it working in this fiddle: http://jsfiddle.net/jbustos/Bq2rw/
Here's an example of one way to do it. The order of the divs in the HTML being left, right, center is important, since otherwise the right will place itself below the left and center elements. See it live at jsfiddle (with JS to hide/show the center). Here's the HTML:
<div class="left">left text</div>
<div class="right">right</div>
<div class="center">center</div>
And CSS:
.left, .center, .right {
background-color: red;
width: 100px;
}
.left {
float: left;
}
.center {
margin: auto;
}
.right {
float: right;
}
I have this this code, http://jsfiddle.net/rnbcoder/WjzbH/
HTML :
<div class="mframes">
<div class="mframe" id="liveBand">
<div class="mframeDetails mfrDetSum" style="background-color: rgba(255,0,0,0.5);">
<p>Live Band Performance</p>
<p>Stay tuned for more details</p>
<div class="mframeBtn" id="leftmframeBtn" style="">Read More</div>
</div><div class="mframeDetails mfrDetFull" style="left:50%;background-color: green;">
<p>This is the main interesting blah blah </p>
</div>
</div><div class="mframe" id="dj">
<div class="mframeDetails mfrDetFull" style="left:0%;background-color: green;">
</div><div class="mframeDetails mfrDetSum" style="left:50%;background-color: rgba(255,0,0,0.5);">
<div class="mframeBtn" id="rightmframeBtn" style=""></div>
</div>
</div>
</div>
CSS :
.mframes{
position: absolute;
height:70%;
width:70%;
margin-top: -18%;
margin-left: -35%;
top: 50%;
left: 50%;
white-space: nowrap;
overflow: hidden;
}
.mframe{
margin: 0;
height: 100%;
width: 50%;
background-color: black;
overflow: hidden;
}
.mframeDetails{
position: absolute;
display: inline-block;
height: 100%;
width: 50%;
text-align: center;
}
.mframe contains divs larger than itself. Its overflow style is set to hidden. Yet it can not trim its children.
What's wrong ?
remove position: absolute; ? Are you setting the top and left in JS or can they be relative?
It could be from the height and width as % rather than numbers too. I'll play around a little for you.
EDIT: Below, I think I found it.
Remove the line below from this class in the jsfiddle link you posted.
display: inline-block;
.mframe{
margin: 0;
height: 100%;
width: 50%;
background-color: black;
overflow: hidden;
}
http://jsfiddle.net/WjzbH/9/
To set and height and width make sure you are display:block, then overflow can be applied =)
Does height and width not apply to span?