CSS overlay div with another div - javascript

Goal: I am trying to move divs ( blue + green ) above banner ( red ).
Purple div have different amount of content, so its height is variable.
Consider header (yellow) and banner ( red ) with fixed height so you can use fixed position.
My try is in jsfiddle.
JsFiddle: http://jsfiddle.net/dEb3m/
This is final output.
Banner is in background. News (green) is relative to main ( orange )
HTML:
<div id="header">header</div>
<div id="banner">banner</div>
<div id="search">search</div>
<div id="news">
<div class="new_item">new 1</div>
<div class="new_item">new 2</div>
<div class="new_item">new 3</div>
</div>
<div style="clear: both;"></div>
<div id="main">main</div>
<div id="footer">footer</div>
CSS:
#header, #banner, #main, #footer {
width: 400px;
}
#banner {
height: 100px;
}
#search {
width: 100px;
float: left;
}
#news {
display: inline-block;
width: 300px;
}
.new_item {
display: inline-block;
float: left;
min-height: 100px;
width: 150px;
max-width: 150px;
}

When do you to move the divs ( blue + green ) above banner ( red )?
If it is always, you can use the following CSS code:
#banner {
margin-bottom: -50px;
}
Here is a jsFiddle to play with.
If it is just when you scroll, you can use the following CSS code:
#banner {
position: fixed;
z-index: -1;
}
#search,
#news {
margin-top: 100px;
}
Here is a jsFiddle to play with.
Cheers,
Thomas.

Solution:
JSFiddle demo
CSS:
#header, #banner, #main, #footer {width: 400px;}
#header {background-color: yellow;}
#banner {background-color: red;height: 50px;position:absolute;z-index:-1;}
#search {background-color: blue;width: 100px;float: left;margin-top:20px;}
#news {background-color: green;display: inline-block;width: 300px;overflow:hidden;white-space:nowrap;margin-top:20px;}
.new_item {
vertical-align:top;
white-space: normal;
background-color: pink;
display: inline-block;
min-height: 100px;
width: 150px;
max-width: 150px;
}
#main {background-color: orange;}
#footer {background-color: silver;}

Related

Change CSS of another element [duplicate]

This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
I have 2 Views. I want to change Style of the 2nd Element when the first element is active WITHOUT Modifying the First Element
#sidebar.active {
margin-left: 0 !important;
}
#content{
padding-right:100px;
}
These are the 2 elements. When the SideBar is active, i want the Content of the page to get a padding of 100px on the right without changing anything from the sidebar
I know what i could do this
#sidebar.active , ##content {
margin-left: 0 !important;
padding-right:100px;
}
But this would give the Sidebar also a padding of 100px which i dont want. I want to affect the CONTENT ONLY when the SideBar is Active. Any help is appreciated
you could achive this with pure CSS, depending on your HTML markup.
Solution 1 (IF #content is right "next" to #sidebar in your HTML):
.container {
display: block;
margin: 10px;
}
#sidebar {
/* for demonstration */
width: 100px;
height: 50px;
background-color: red;
display: inline-block;
vertical-align: top;
margin-left: 0;
}
#content {
/* for demonstration */
width: 100px;
height: 50px;
background-color: orange;
display: inline-block;
vertical-align: top;
}
#sidebar.active + #content {
padding-right: 100px;
}
<div class="container">
<div id="sidebar">
INACTIVE sidebar
</div>
<div id="content">
content
</div>
</div>
<div class="container">
<div id="sidebar" class="active">
ACTIVE sidebar
</div>
<div id="content">
content
</div>
</div>
Solution 2 (IF #content is a child of #sidebar in your HTML):
.container {
display: block;
margin: 10px;
}
#sidebar {
/* for demonstration */
width: ;
height: 50px;
background-color: red;
display: inline-block;
vertical-align: top;
margin-left: 0;
}
#content {
/* for demonstration */
width: 100px;
height: 50px;
background-color: orange;
display: inline-block;
vertical-align: top;
}
#sidebar.active #content {
padding-right: 100px;
}
<div class="container">
<div id="sidebar">
INACTIVE sidebar
<div id="content">
content
</div>
</div>
</div>
<div class="container">
<div id="sidebar" class="active">
ACTIVE sidebar
<div id="content">
content
</div>
</div>
</div>

How to keep an image at 50% of the page and containing its height

I have a container and in the container are two sections, both at 50% width. In the right side container is an image. I want the left and right boxes to both be the same height at all times and the image to always be 50% width at all times as well.
I cannot figure out how to always keep the image at full height and width of the container without completely making the image look awful. Even if some parts of the image are cut out, that would be fine.
How can I go about doing this?
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: 100%;
height: auto;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
you have to give the image height:100%; and width:auto; and to the container overflow:hidden;
html, body {
margin: 0;
padding: 0;
}
#box-container {
width: 100%;
height: auto;
overflow:hidden;
}
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
}
#box1 {
background: blue;
}
#box2 {
}
#box2 img {
width: auto;
height: 100%;
}
<div id="box-container">
<div id="box1">
</div><div id="box2">
<img src="http://optimumwebdesigns.com/images/demolition1.jpg" alt="">
</div>
</div>
I believe flex could make it. You could use bootstrap row class, like this:
div class="row" style="display:flex;"
and then, instead of box1 and box2, use the classes div class="col-md-6" for each one (they fit half [50%] of the div that contains it). Give it a try. Sorry for the poor english.
#box1, #box2 {
width: 50%;
height: 500px;
display: inline-block;
overflow: hidden;
}
#box2 img {
/* width: 100%; */
height: 100%;
}
I think this is, what you want to achieve
<style>
.boxes{
width:50%;
float:left;
border:1px solid black;
box-sizing:border-box;
height:1000px;
}
img{
max-width:100%;
}
#sectionOne{
background-image:url("http://optimumwebdesigns.com/images/demolition1.jpg");
}
</style>
<div id="wrapper">
<div class="boxes" id="sectionOne">
<!-- <img src="http://optimumwebdesigns.com/images/demolition1.jpg"> -->
</div>
<div class="boxes">
THis is the noather Div
</div>
</div>
Comment out the the #serctionOne part and un comment the <img> tag for another version.

overlay footer over div

I have tried to create a overlaying footer by adding position:absolute to #container & a Top: XXpx to .panel2 as well as adding a z-index however this does not work any help is greatly appreciated.
https://jsfiddle.net/z3q2wtLf/29/embedded/result/
below is an example of what I'm trying to accomplish
div {
position: absolute;
width: 200px;
height: 200px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}
<div id="div1"></div>
<div id="div2"></div>
<div2> would be the footer? In this case, only <div2> has to get the position: absolute setting. Also, as #Yaakov already wrote, the surrounding container has to have position: relative.
A very basic setup would be:
<div class="wrap_all">
<div class="content">
(content text text text)
</div>
<div class="footer">
(footer text)
</div>
</div>
with the following CSS:
.wrap_all {
position: relative;
}
.content {
background: red;
margin-bottom: 50px;
}
.footer {
position: absolute;
bottom: 0px;
height: 50px;
background: yellow;
}
(The margin-bottom: 50px; on .content is there so that no text or images in .content can be hidden by the footer)
Your #div1 and #div2 should be wrapped within an element with relative position in order to work.
For example:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
And the css:
#container {
position:relative;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}

Center 3 div in parent div

I am trying to center 3 div into a parent div with no result.
Could you help me please ?
HTML :
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
CSS :
#container {
text-align: center;
}
#left, #middle, #right {
width: 200px;
float: left;
background: red;
height: 90px;
}
RESULT :
Change the float:left; to display:inline-block;, like this:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
you can try this one:
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
DEMO HERE
Try display flex. You'll need to add vendor prefixes!
#container {
text-align: center;
display: flex;
justify-content: space-between;
width: 100%;
}
#left, #middle, #right {
width: 200px;
background: red;
height: 90px;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
#container {
text-align: center;
}
#left, #middle, #right {
width: 200px;
margin:0px auto;
height: 90px;
}
#left
{
background: red;
}
#middle
{
background:blue;
}
#right
{
background: green;
}
<div id="container">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
Add Bootstrap CSS and have a look at this example.
Here:
COL=Column
MD=Medium Sized Device
4 represents the partition of the screen as the Maximum column possible in a single row is 12
So 4/12=3 Panels in result.
<div class="row">
<div class="col-md-4">left</div>
<div class="col-md-4">middle</div>
<div class="col-md-4">right</div>
</div>
Try Bootstrap it will make your life easy.
Here's link for the Grip System you want Bootstrap Grid System.
remove float & add display inline-block
#left, #middle, #right {
width: 200px;
display:inline-block;
background: red;
height: 90px;
}
Add margin-left: auto, margin-right:auto, width: 600px to your container.
Thanks

CSS how to fill the entire width?

i already goggle but still don't know what to do
i have 3 div
<body>
<div id="container">
<div id="center"> <h1>center</h1> </div>
<div id="right"> <h1>right</h1> </div>
</div>
</body>
what i try to accomplish
div id=center is auto fill the width
div id=right is in right position of the div id=center, width=200px;
what i try so far
#center{
background-color: green;
float: left;
overflow: auto;
}
#right{
background-color: red;
float: right;
width: 200px;
}
How to make div id=center fill the entire width with another div (div id=right) in right position of it
jsfiddle
forgive my english
If you need a pure CSS Solution, than consider altering your DOM
Demo
First of all, remove float: left; property from #center, and than I've added width: auto; and overflow: hidden; properties which will make the columns independent.
Reference Code :
<div id="container">
<div id="right"></div>
<div id="center"></div>
</div>
#container {
height: auto;
overflow: hidden;
}
#center {
background-color: green;
width: auto;
height: 20px;
overflow: hidden;
}
#right {
background-color: red;
float: right;
height: 20px;
width: 200px;
}
Doesn't work that way - you need to nest the 'right' div inside of the 'center' div:
<body>
<div id="container">
<div id="center">
<h1>center</h1>
<div id="right">
<h1>right</h1>
</div>
</div>
</div>
</body>
Then make the h1 display inline:
h1 {
display: inline-block;
}
#center {
background-color: green;
float: left;
width: 100%;
}
#right {
background-color: red;
float: right;
width: 200px;
}
Here's an updated fiddle.
I got this from here and learnt a new/useful one.
The following solution will not affect your dom in making changes.
#center{
background-color: green;
float: left;
width: -moz-calc(100% - 200px);
width: -webkit-calc(100% - 200px);
width: calc(100% - 200px);
}
DEMO
Adding this separate since the other one may be useful to someone in the future. Here's the only CSS only solution I could come up with, but there's a caveat: you have to use percentage based widths on both divs:
#center {
background-color: green;
display: inline-block;
float: left;
width: 80%;
}
#right {
background-color: red;
float: left;
width: 20%;
}
20% should be close to what you need on the smaller div, and you can use media queries if necessary to keep it from being too wide on larger screens.
Here's an updated fiddle.
What can i do is customize your css :
#center{
background-color: green;
position : absolute;
width : 100%;
z-index : -1;
}
#center fill all the empty space between it and #right. but you have to notice it that the #center is behind the #right

Categories