I'm a beginner to Html & CSS and have a probably really simple question, but I just can't seem to find the answer: How could you span an html element(child div, text, etc.) across multiple divs using only CSS & Html(no Javascript/JS)? I'm building a simple event calendar(using HTML+CSS) and am currently working on multiple day events.
html, body {
left: 0;
margin: 0;
background:white;
height:100%;
}
b{
font-family:calibri;
padding-left:10px;
}
#container{
margin: 0 auto;
width:300px;
padding-top:50px;
}
.colorone{
background:#FFEB3B;
width:150px;
height: 150px;
float:left;
}
.colortwo{
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
}
<html>
<head></head>
<body>
<div id="container">
<div class="colorone"><b>4</b>
</div>
<div class="colortwo"><b>5</b>
</div>
</div>
</body>
</html>
Desired result:
The blue div/rectangle should also be able to span more than two parent divs if wanted.
I've searched and researched online & on StackOverflow but I still can't seem to find the answer. Any help would be greatly appreciated.
Here's a quick example using your code with a few changes. I added the position to the container and the 3rd element and set the z-index to 2 on the div with the class of .colorthree.
var width = 0,
container = $('#container');
container.children('div').each(function(){
if(!$(this).hasClass('colorthree')) {
width += $(this).width();
}
});
container.width(width);
$('.colorthree').width(width-20);
html, body {
left: 0;
margin: 0;
background:white;
height:100%;
}
b{
font-family:calibri;
padding-left:10px;
}
#container{
margin: 20px auto;
width:300px;
height: 150px;
position:relative;
white-space: nowrap;
}
.colorone, .colortwo, .colorfour {
width:150px;
height: 150px;
background:#8BC34A;
overflow:hidden;
float:left;
}
.colorone{
background:#FFEB3B;
}
.colorfour {
background: red;
}
.colorthree {
z-index: 2;
top: 20px;
left: 10px;
position: absolute;
width:90%;
height: 40px;
background:blue;
overflow:hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="colorone"><b>1</b></div>
<div class="colortwo"><b>2</b></div>
<div class="colorfour"><b>4</b></div>
<div class="colorthree"><b>3</b></div>
</div>
You can do that with position: absolute
No javascript needed, only with html and css
html,
body {
left: 0;
margin: 0;
background: white;
height: 100%;
}
b {
font-family: calibri;
padding-left: 10px;
}
#container {
margin: 0 auto;
width: 300px;
padding-top: 50px;
position: relative;
}
.colorone {
background: #FFEB3B;
width: 150px;
height: 150px;
float: left;
}
.colortwo {
width: 150px;
height: 150px;
background: #8BC34A;
overflow: hidden;
}
.colorthree {
background-color: blue;
display: block;
position: absolute;
width: calc(100% - 50px);
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
left: 0;
right: 0;
color: white;
text-align: center;
line-height: 50px;
}
<html>
<head></head>
<body>
<div id="container">
<span class="colorthree">I'm Span!</span>
<div class="colorone"><b>4</b>
</div>
<div class="colortwo"><b>5</b>
</div>
</div>
</body>
</html>
Related
I used the below codes to create a HTML page where I kept header and footer tags in body tag. The height of header is 16% and footer is 5%. Now I inserted a div tag in body and gave a height of 79%(100-16-5%) but when I ran the code the height of the div tag is zero, why is it and how to align the div tag between header and footer.
Code:
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
}
header{
position: absolute;
background-color: red;
height: 16%;
width: 100%;
margin-bottom: 5px;
top: 0;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
.body_1{
background-color:blueviolet;
height: 79%
}
footer{
background-color: red;
position: absolute;
height:5%;
width: 100%;
bottom: 0;
}
<header>
<div id='hd_div1' class='hd_div'></div>
<div id='hd_div2' class='hd_div'>Hello This a test text </div>
<div id='hd_div3' class='hd_div'></div>
<div class='logo'>
<img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'></div>
<footer>
<div id='foot1'></div>
</footer>
Image:
.body_1 has hight 0 because you body has height 0.
Both header and footer are positioned absolutely which ignores body in this case.
Simple solution will be to tell body to have a height of 100vh (whole window height) but you will have to apply margin from top to .body_1 so it will not be placed under header
Using position: absolute when it is not necessary is overall a bad approach to problem.
A god solution will be to set body to display: grid which has been created for this type of job.
more about grid
In this snipper I have added grid to body element and removed heights from header, .body_1 and footer (their height is now set with grid-template-rows so there is no point to set them in those elements).
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 16% auto 5%;
height: 100vh;
}
header{
background-color: red;
width: 100%;
position: relative;
}
.body_1{
background-color:blueviolet;
}
footer{
background-color: red;
width: 100%;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
<header>
<div id='hd_div1' class='hd_div'> </div>
<div id='hd_div2' class='hd_div'>Hello This a test text </div>
<div id='hd_div3' class='hd_div'></div>
<div class='logo'>
<img id='head_img' src='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'></div>
<footer>
<div id='foot1'></div>
</footer>
This is exactly your code, and the body_0 is blueviolet:
body{
margin: 0 0 0 0;
background-color: #E6E6FA;
}
header{
position: absolute;
background-color: red;
height: 16%;
width: 100%;
margin-bottom: 5px;
top: 0;
}
.logo{
position:absolute;
background-color:#4CD4CB;
height:100%;
width: 10%;
}
#head_img{
width: 120px;
height: 120px;
display: block;
margin-left: auto;
margin-right: auto;
}
.hd_div{
position:absolute;
height:40px;
width: 90%;
right:0;
overflow: hidden;
}
#hd_div1{
background-color: red;
top: 0;
}
#hd_div2{
background-color: white;
top: 33.3333%;
text-align: center;
}
#hd_div3{
background-color: red;
top: 66.6666%;
}
.body_1{
background-color:blueviolet;
height: 79%
}
footer{
background-color: red;
position: absolute;
height:5%;
width: 100%;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css">
<link rel='shortcut icon' type='image/x-icon' href='data:image/png;base64,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' />
<title>Search</title>
</head>
<body>
<header>
<div id='hd_div1' class='hd_div'> </div>
<div id='hd_div2' class = 'hd_div'>Hello This a test text </div>
<div id='hd_div3' class = 'hd_div'></div>
<div class ='logo'>
<img id='head_img' src ='.\search-logos.jpeg' alt='comp_logo' >
</div>
</header>
<div class='body_1'> </div>
<footer>
<div id='foot1'></div>
</footer>
</body>
</html>
I'm having an issue with my site's footer. Whenever more content is added further down the page and a scrollbar is made available, the user scrolls and the footer is not at the bottom. The footer is in position absolute, and shows neatly at the bottom of the screen before the user scrolls down. This would be find if the user didn't have to scroll down, but obviously some pages are longer than others. All the code is shown below. Using fixed would obviously not do what I want. I want the user to scroll down to the bottom of a page to find the footer there, like with most websites.
HTML:
<div id="topbox">
<img style="position:relative;left:12px;top:3.5px;width:121.55px;
height:42.5px;">
<div id="box" class="boxa">
text1
</div>
<div id="box" class="boxb">
text2
</div>
</div>
<div style="position:absolute;top:10px;right:0px;">
<img>
</div>
<div id="textbox" style="top:40px;left:90px;margin-right:500px;">Imagine a lot of text here, possibly enough to cause the page to overflow downwards.</div>
<img style="width:15%;height:15%;float:right;z-index:1;
position:relative;bottom:200px;margin-right:100px;">
<div class="backgroundimage"></div>
<div id="footer"><p style="position:relative;top:39px;left:5px;font-size:80%;">Footer text.</p></div>
CSS:
#box {
position:relative;
}
.boxa {
left:173px;
bottom:34px;
width:249px;
}
.boxb {
left:430px;
bottom:55px;
width:90px;
}
#textbox {
position:relative;
background:rgba(255,255,255,1);
padding:7.5px;
font-family:arial;
z-index:1;
//box-shadow:0 0 30px rgba(000,000,000,1);
border-radius:15px;
line-height:25px;
font-size:90%;
}
#topbox {
background-color:white;
width:50000px;
height:50px;
position:relative;
bottom:8px;
right:8px;
padding-right:20px;
}
#media screen and (min-width:1008px) {
#textbox {
width:auto;
}
}
#media screen and (max-width:1006px) {
#textbox {
width:auto;
}
}
#footer {
background-color:gray;
height:75px;
position:absolute;
bottom:0px;
left:0px;
color:lightgray;
font-family:arial;
width:100%;
}
.backgroundimage {
border-bottom:300px solid rgb(247,145,47);
border-right:3000px solid transparent;
z-index:0;
position:relative;
right:110px;
bottom:70px;
}
Please read carefully through my code tosee what I have attempted, and how everything works together. I have had no issues with the page at all, so if there is code completely irrelevant to the footer just leave it as is. Also please actually read through what I have already said so you are fully aware of what I am trying to achieve. Many thanks in advance.
If you mean a sticky footer, which is always on bottom position at less content. When more content is visible the footer is scollable again.
One way is to use flexbox. Use a wrapper and two divs inside. The Second is the footer. Then you give the first div more space.
This technic works in all modern browsers.
*{
padding: 0;
margin: 0;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
<body>
<header>header…</header>
<main>main…</main>
<footer>footer…</footer>
</body>
Make it position:absolute
#footer {
position:absolute;
bottom:0;
left:0;
right:0;
}
if I understood correctly what you want, try this:
.backgroundimage {
border-bottom: 300px solid rgb(247,145,47);
z-index: 0;
position: relative;
right: 110px;
}
#footer {
background-color: gray;
height: 75px;
bottom: 0;
left: 0;
right: 0;
margin-top: 0px;
color: lightgray;
font-family: arial;
width: 100%;
}
Wrap all the elements in a div
<body>
<div> ...all your content... </div>
<div id"footer"></div>
</body>
jsfiddle link
#box {
position: relative;
}
.boxa {
left: 173px;
bottom: 34px;
width: 249px;
}
.boxb {
left: 430px;
bottom: 55px;
width: 90px;
}
#textbox {
position: relative;
background: rgba(255, 255, 255, 1);
padding: 7.5px;
font-family: arial;
z-index: 1;
//box-shadow:0 0 30px rgba(000,000,000,1);
border-radius: 15px;
line-height: 25px;
font-size: 90%;
}
#topbox {
background-color: white;
width: 50000px;
height: 50px;
position: relative;
bottom: 8px;
right: 8px;
padding-right: 20px;
}
#media screen and (min-width:1008px) {
#textbox {
width: auto;
}
}
#media screen and (max-width:1006px) {
#textbox {
width: auto;
}
}
html {
height: 100%;
box-sizing: border-box;
}
body {
min-height: 100%;
padding-bottom: 75px;
/*size of the footer*/
position: relative;
margin: 0;
box-sizing: border-box;
}
#footer {
background-color: gray;
height: 75px;
position: absolute;
bottom: 0px;
left: 0px;
color: lightgray;
font-family: arial;
width: 100%;
}
.backgroundimage {
border-bottom: 300px solid rgb(247, 145, 47);
border-right: 3000px solid transparent;
z-index: 0;
position: relative;
right: 110px;
bottom: 70px;
}
<div id="mainpart">
<div id="topbox">
<img style="position:relative;left:12px;top:3.5px;width:121.55px;
height:42.5px;">
<div id="box" class="boxa">
text1
</div>
<div id="box" class="boxb">
text2
</div>
</div>
<div style="position:absolute;top:10px;right:0px;">
<img>
</div>
<div id="textbox" style="top:40px;left:90px;margin-right:500px;">Imagine a lot of text here, possibly enough to cause the page to overflow downwards.</div>
<img style="width:15%;height:15%;float:right;z-index:1;
position:relative;bottom:200px;margin-right:100px;">
<div class="backgroundimage"></div>
</div>
<div id="footer">
<p style="position:relative;top:39px;left:5px;font-size:80%;">Footer text.</p>
</div>
I need to display single page as below:
http://s18.postimg.org/epvzomt0p/P_62343_Patron_Roca_Ebrochure_R2_01_1.png
I made working example in
https://jsfiddle.net/dipchk/pua95mwg/1/
Can any one tell me what more I need to implement in css in order to look like above image
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
css
.wrapper {
width: 90%;
height: 90%;
position: relative;
background-color: white;
}
.wrapper div {
padding: 10px;
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
display: block;
position: absolute;
width:70%;
height: 50%;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
position: absolute;
display: inline-block;
width: 15%;
height: 40%;
}
Please check this solved
body{margin:0; padding:0;background:#ddd;}
.wrapper {
position: relative;
background-color: #fff;
width:580px;margin:0 auto;
padding:40px 0;
height:500px;
}
.wrapper div {
}
#one {
}
#one img {
width:100%;
}
#two{position: absolute;
right: 0px;
top: 72px;}
#two img {
width: 166px;
}
<body>
<div class="wrapper">
<div id="one"><img src="http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png"></div>
<div id="two"><img src="http://i.stack.imgur.com/rg43a.png"></div>
</div>
</body>
You Just Remove
Position:absolute;
and Do what you want.
Thank you
It's difficult to understand exactly what you are asking.
According to the image you showed, please check the following code.
body{margin:0; padding:0;}
.wrapper {
position: relative;
background-color: #ccc;
}
.wrapper div {
}
#one {
background:url('http://s2.postimg.org/5cqv0dqwp/86278_Patron_pg4_Top.png') no-repeat;
width:580px;
height: 142px;
margin:0 auto;
}
#two {
background:url('http://s18.postimg.org/9zimjy25l/P_62343_Patron_Roca_Ebrochure_R1.jpg') no-repeat;
width: 580px;
height: 924px;
margin:0 auto;
}
<body>
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
</body>
I need your help,
How can the text inside the white part of the box be aligned dead center (aligned both vertically and horizontally)?
See picture below:
The desired result is:
Here's the HTML markup:
<!DOCTYPE html>
<html>
<head>
<title>Centered Div</title>
<style>
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: tahoma;
font-size: 8pt;
font-weight: bold;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
}
#inner1 {
height: 100%;
border: 1px solid blue;
}
#inner2 {
height: 100%;
border: 1px solid green;
}
#titlebar {
cursor: pointer;
height: 23px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
color: white;
line-height:22px;
}
#button {
line-height: 10px;
width: 18px;
font-size: 10px;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
}
#alertText {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="titlebar"><div style="padding-left: 3px;">Information Box</div></div>
<div><input id="button" type="button" value="X"></div>
<div id="alertText">This is some sample text that will appear here</div>
</div>
</div>
</body>
</html>
Here's a Fiddle
#alertText {
position: absolute;
width: 100%;
height: 20px;
top: 50%;
margin-top: -10px;
text-align: center;
}
If it is only going to be one line of text you can do this:
#alertText {
line-height: 58px;
text-align: center;
}
If you going to have more lines of text you might need to do it some other way. Possible with position.
In a recent project, I have coded this:
<div class="table">
<div class="cell">
<img src="whatever.png">
<p>Understand align</p>
</div>
</div>
<style>
.table { display: table; width: 100%; height:100%;}
.table .cell { display: table-cell; text-align:center; vertical-align: middle;}
</style>
Hope it is usefull. You can align a text or even a image inside the "cell" div.
this is actually harder than it looks. You might find this tutorial handy: http://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/
you can use padding :
fiddle: http://jsfiddle.net/parslook/PgEwF/2/
#alertText {
max-width:400px;
padding:50px;
}
You can set your div to have a display: table; and use positioning to critically center the content within:
#alertText {
display: table;
position: absolute;
top: 0;
margin: auto;
left: 0;
bottom: 0;
right: 0;
text-align: center;
width: 100%;
}
This will also gracefully support multiple lines of text without any hardcoded or magic numbers.
Here is the result:
Codepen sketch.
Would like to place the bottom (green) container below the left and right containers (red and blue) but still keep it inside the main (black) container. Cannot get it to work. Any suggestions? (jsfiddle):
<!DOCTYPE HTML>
<html>
<body>
<div class="main_container">
<div class="left_container">
</div>
<div class="right_container">
</div>
<div class="bottom_container">
</div>
</div>
</body>
</html>
CSS:
div.main_container {
background: #000;
border: none;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
width: 100%;
min-height: 400px;
margin: auto;
position: relative;
}
div.left_container {
float:left;
position:absolute;
width: 220px;
background: red;
margin: 0;
min-height: 100%;
padding: 0;
}
div.right_container {
position: relative;
margin-left: 220px;
width: 715px;
height: 100px;
background: blue;
}
div.bottom_container {
width: 100%;
height: 100px;
background: green;
}
This should size the height of the left container to be everything except 100px and put the green container on the bottom of the whole thing.
div.bottom_container {
width: 100%;
height: 100px;
background: green;
position: absolute;
bottom: 0;
}
div.left_container {
position:absolute;
bottom: 100px;
top: 0;
width: 220px;
background: red;
}
position:fixed;
bottom:0px;
add these two properties in div.bottom_container . hope you are getting what you expect