I have here some code
.container{
height: 200px;
width: 100%;
background-color: black;
}
.container_1{
margin-bottom: 50px;
height: 200px;
width: 20000px;
background-color: black;
}
<div class="container_1">
</div>
<div class="container">
</div>
If you scroll to right side, the .container stopped. But I gave him a with of 100%, why it won't work?
It is 100% of its parent, which is the body. The body didn't get an explicit width, so it's just as wide as the client size of the window. The other div is forced to be wider (20000px), so it extends outside of the bounds of the body.
In the snippet below, I've added a border to the body, so you can see how the second div snugly fits into that boundary.
.container {
height: 200px;
width: 100%;
background-color: black;
opacity: 0.5;
}
.container_1 {
opacity: 0.5;
margin-bottom: 50px;
height: 200px;
width: 20000px;
background-color: black;
}
body {
border: 3px solid red;
}
<div class="container_1">
</div>
<div class="container">
</div>
Because its 100% of the view port
Try this,
.main_container{
float:left;
}
.container{
height: 200px;
width: 100%;
background-color: black;
}
.container_1{
margin-bottom: 50px;
height: 200px;
width: 20000px;
background-color: black;
}
<div class="main_container">
<div class="container_1">
</div>
<div class="container">
</div>
</div>
Related
This is the code:
<div class="c1">
<div class="c2">
<div class="c3">
</div>
</div>
</div>
<style>
.c1{
overflow-y: scroll;
overflow-x: visible;
margin: 50px;
width: 500px;
height: 300px;
background-color: red;
}
.c2{
width: 200px;
height: 1000px;
background-color: yellow;
}
.c3{
margin-left: -50%;
width: 200px;
height: 100px;
background-color: red;
}
</style>
What I'm trying to achieve is have scroll functionality for the y-axis while having the green div exceed the other to the left, like it would if overflow-y is unset for the red div. Is this possible at all? Here is the code to test: https://liveweave.com/RCeADH
I'm trying to fully comprehend a float issue. In the code below, when div1 is floated left div2 snaps underneath it as expected, except for the paragraph text. Why does the paragraph text extend below div1 when the divs are identical?
HTML
<div id="div1">
<p>This is div1</p>
</div>
<div id="div2">
<p>This is div2</p>
</div>
CSS:
#div1 {
width: 100px;
height: 100px;
background-color: yellow;
float:left;
}
#div2 {
width: 100px;
height: 100px;
background-color: red;
border: 1px black solid;
}
https://jsfiddle.net/u9nugwbg/2/
You need ta moke position:absolute; in div1
The code
#parent {
background-color: blue;
width: 500px;
height: 300px;
}
#div1 {
width: 100px;
height: 100px;
background-color: yellow;
float:left;
position:absolute; <!--Make position:absolute-->
}
#div2 {
width: 100px;
height: 100px;
background-color: red;
border: 1px black solid;
}
<div id="parent">
<div id="div1">
<p>This is div1</p>
</div>
<div id="div2">
<p>This is div2</p>
</div>
</div><!--closes parent-->
If you remove div1 you'll see the <p> is in the yellow div.
You need ta moke foat:left; in div2. The Code:
#div2
{
float: left;
width: 100px;
height: 100px;
background-color: red;
border: 1px black solid;
}
#parent {
background-color: blue;
width: 500px;
height: 300px;
}
#div1 {
width: 100px;
height: 100px;
background-color: yellow;
float:left;
}
I am having trouble with some floated boxes in CSS.
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>
Here is the pen:
http://codepen.io/anon/pen/myKzMd
I want the left green box to start on the same height as the red one. HTML structure should stay as is.
Thanks,
Sascha
This code below will get the result you want.
HTML
<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>
CSS
.container {
height:400px;
border: 5px solid green;
}
.one {
height: 100px;
background: red;
width: 60%;
float: right;
margin-bottom: 10px;
}
.two {
height: 100px;
background: blue;
width: 60%;
float: right;
}
.tre {
height: 150px;
background: green;
width: 40%;
}
EDIT: Updated the answer with full code, to avoid confusing, since OP has updated the demo in the question. So no float on .tre would be the best solution to me.
.tre {
float: left;
}
Dont forget to put overflow:hidden in parent div ie .container because once you float the child elements you have to put overflow:hidden in its
try this out :
.container {
height:400px;
border: 5px solid green;
}
.one {
height: 100px;
background: red;
width: 60%;
float: right;
margin-left:40%;
margin-bottom: 10px;
}
.two {
height: 100px;
background: blue;
width: 60%;
float: right;
}
.tre {
height: 150px;
background: green;
width: 40%;
}
.container {
height:400px;
border: 5px solid green;
}
.one {
width: 40%;
height: 100%;
float: left;
background: blue;
}
.two, .three {
width: 60%;
height: 50%;
float:right;
}
.two {
background: yellow;
}
.three {
background: red;
}
You can change your structure like below...
<div class="container">
<div class="one">One</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
<div class="two">Two</div>
</div>
I need a fixed header under which the content (body) can scroll. This header should be 100% of the parent, but the parent has some margin-right. The fixed header gets 100% width of the window instead of the parent.
How can this be fixed?
Example:
http://jsfiddle.net/4u0c85k8/
HTML
<div id="parent">
<div id="child">
<div id="header">
HEADER
</div>
<div id="content">
CONTENT
</div>
</div>
</div>
CSS
#parent {
width: 100%;
border: solid 1px black;
}
#child {
background-color: lightgray;
margin: 0 8px;
width: auto;
}
#header {
position: fixed;
height: 28px;
top: 17px;
background-color: lightgreen;
width: 100%;
}
#content {
margin-top: 36px;
height: 1000px;
}
If you change width: 100% for this css:
right:0px;
left: 0px;
margin-left:17px;
margin-right:15px;
it works but i dont think its the best solution.
HTML:
<div id="outer1">
<div class="bg">
<div class="top"></div>
<div class="base"></div>
</div>
<div class="content"></div>
</div>
<div id="outer2">
<div id="bg">
<div class="top"></div>
<div class="base"></div>
</div>
<div class="content"></div>
</div>
CSS2:
div { width: 100%; }
#outer1, #outer2 {position: relative;}
#outer1 .top { height: 200px; background-color: blue; }
#outer1 .base { height: 200px; background-color: yellow; }
#outer2 .top { height: 200px; background-color: green; }
#outer2 .base { height: 200px; background-color: yellow; }
.content {
width: 160px; margin: 0 auto;
position: relative; bottom: 250px; height: 300px; background-color: white; border: 1px solid black;}
This is the fiddle
The white, black-bordered div (.content) is supposed to sit on the split-coloured background (.bg) (as it is).
Using relative positioning - but the space i've told it to move up by (250px), is still been taken by it's parent (#outer1). (there's a gap between to the two 'outer' divs - they should be touching)
I tried absolute positioning but because the content div is taller than the relative content, the height is not honoured. And becuase it's dynamic content I cannot give it a fixed height (although i did for illustration)
One option is javascript, another is using a background-repeater for the top half.
Can it be achieved with pure CSS2?
Edit: Complete rewrite...
Here is the new fiddle: http://jsfiddle.net/FSXj8/14/
Okay so I took the liberty to start from scratch. Here is the html
<div id="outer1" class="container">
<div class="content">
<div class="innerContent">hello world</div>
</div>
<div class="top"></div>
<div class="base"></div>
</div>
<div id="outer2" class="container">
<div class="content">
<div class="innerContent">hello world</div>
</div>
<div class="top"></div>
<div class="base"></div>
</div>
And here is the CSS
div {
width: 100%;
}
.container {
height: 400px;
display: table;
position: relative;
}
.top, .base {
position: absolute;
left: 0;
height: 50%;
z-index: 0;
}
.top {
top: 0;
}
.base {
bottom: 0;
}
#outer1 .top {
background-color: blue;
}
#outer1 .base {
background-color: yellow;
}
#outer2 .top {
height: 50%;
background-color: green;
}
#outer2 .base {
height: 50%;
background-color: yellow;
}
.innerContent {
min-height: 100px;
border: 1px solid black;
background-color: white;
width: 100px;
}
.content {
display: table-cell;
position: relative;
vertical-align: middle;
z-index: 1;
background-color: transparent;
height: 100%;
}
Not sure if this is what you want, you said something about not using absolute:
.content {
width: 100px; margin 0 auto;
position: absolute; margin-top:-250px; height: 100px; background-color: white; border: 1px solid black;}
http://jsfiddle.net/FSXj8/7/