I want margin-top:10px to be displayed on the top of box3.
Here is the proper codes on firefox.
<div class="clear"></div> was written as a single line before div box3,and
write div.clear{clear:both;} as a special part.
div.box{
width:105px;
height:200px;
border:1px solid red;
}
div.box1{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.box2{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.clear{
clear:both;
}
div.box3{
width:100px;
height:80px;
border:1px solid red;
margin-top:10px;
}
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="clear"></div>
<div class="box3">box3</div>
</div>
</body>
Now i move clear:both; in the div.box3,the whole css code as below.
div.box{
width:105px;
height:200px;
border:1px solid red;
}
div.box1{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.box2{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.box3{
clear:both;
width:100px;
height:80px;
border:1px solid red;
margin-top:10px;
}
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="clear"></div>
<div class="box3">box3</div>
</div>
</body>
No 10px at the top of div.box3.
I know right way to solve it ,want to know the principle behind the proper css code.
Related
I am trying to have a load of divs which are horizontal scrolled. Each div is absolute positioned (the red box in my example) so that it is visible outside of the scrolling container. I have an example that works well but seems I have lost the ability to scroll. The scroll bar appears but scrolling it does not move the divs.
By adding position relative to the overall container I can get the divs to scroll, but they don't show outside of the container.
Please help me be able to show contents outside of container yet maintain scrollability.
<div style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
</div>
I slightly edited your code snippet and added a class to the black container, to easily style its direct children with this:
.container > div {
border: 1px solid green;
}
.container > div {
border: 1px solid green;
}
<div class="container" style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
<div style="display:inline-block; margin-left:50px; width:500px; height:40px">
<div style="border:1px solid black; height:40px; width:500px; position:absolute">
<div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
</div>
</div>
</div>
Now you should be able to see that the scrolling is actually working, but only for the green divs. The other elements (black border divs and red divs) are not scrolling because they have position: absolute;. This means that they are taken out of the document flow and since no other element has position: relative, they are absolute relative to the body. That's why, if you scroll with the main scrollbar, they will actually scroll.
You could add position: relative; to the container, but doing so, as you said, the elements won't overflow the container.
As far as I know, there's no way to solve this with just css and you probably have to make them scroll through some Javascript.
A very basic example:
const container = document.querySelector('.container');
const boxes = document.querySelectorAll('.box');
container.addEventListener('scroll', (e) => {
let offset = e.target.scrollLeft;
for(let box of boxes) {
box.style.transform = `translateX(${offset}px)`;
}
});
.container > div {
border: 1px solid green;
}
.fake-width {
width: 2000px;
}
.boxes {
display: flex;
}
.box {
background: blue;
}
.box + .box {
margin-left: 50px;
}
<div class="container" style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
<div class="fake-width"></div>
</div>
<div class="boxes">
<div class="box box-1" style="display:inline-block; margin-left:50px; width:500px; height:40px">
</div>
<div class="box box-2" style="display:inline-block; margin-left:50px; width:500px; height:40px">
</div>
<div class="box box-3" style="display:inline-block; margin-left:50px; width:500px; height:40px">
</div>
</div>
</div>
As you can notice, if you go this route, you don't even need to keep the divs inside the scrolling container. You could, depending on what exactly you are going to build, but you don't need to.
I have created a bullseye logo using CSS and want to put a text aligned next to the logo.
#logo{
width:25px;
height:25px;
border-radius:50%;
background-color:red;
background-clip:content-box;
padding:5px;
border:5px solid red;
color:red;
}
<div id="logo" style="float:left;"><b ><span style="margin-left: 20px;p-bottom: -50px;"> text123</span></b></div>
You can use flexbox:
#container {
display: flex;
align-items: center
}
#logo{
width:25px;
height:25px;
border-radius:50%;
background-color:red;
background-clip:content-box;
padding:5px;
border:5px solid red;
color:red;
}
#text {
color: black;
padding-left: 12px
}
<div id="container">
<div id="logo"></div>
<div id="text">text123</div>
</div>
I want the leftcol and rightcol divs to float next to each other. How do I do that?
#charset "utf-8";
/* CSS Document */
#container{width:100%; height:1000px; margin:auto; background-color:#00ffff;}
#header{width:95%; height:80px; margin:auto; margin-top:50px;}
#logo{width:10%; height:50px; margin-top:10px; margin-left:20px; float:left;}
#navbar{width:60%; height:50px; margin-top:10px; margin-right:10px; float:right;}
#maincontent{width:95%; height:70%; margin:auto; margin-top:15px;}
#leftcol{width:14%; height:30%; margin-left:15px; margin-top:20px; position:fixed;}
#rightcol{width:40%; height:30%;}
#charset "utf-8";
/* CSS Document */
#container{width:100%; height:1000px; margin:auto; background-color:#00ffff;border:1px solid black;}
#header{width:95%; height:80px; margin:auto; margin-top:50px;border:1px solid black;}
#logo{width:10%; height:50px; margin-top:10px; margin-left:20px; float:left;border:1px solid black;}
#navbar{width:80%; height:50px; margin-top:10px; margin-right:10px; float:right;border:1px solid black;}
#maincontent{width:95%; height:70%; margin:auto; margin-top:15px;border:1px solid black;}
#leftcol{width:14%; height:30%; margin-left:15px; margin-top:20px;border:1px solid black;display:inline-block;}
#rightcol{width:80%; height:30%;border:1px solid black;display:inline-block;}
<html>
<head></head>
<body>
<div id="container">
<div id="header">
<div id="logo">
#LOGO
</div>
<div id="navbar">
#NAVBAR
</div>
</div>
<div id="maincontent">
<div id="leftcol">
#leftcol
</div>
<div id="rightcol">
#rightcol
</div>
</div>
</div>
</body>
</html>
add this to your div css code it will make div's aligned
display:inline-block;
Okay, so here's the code
.div1 {
background-color:skyblue;
font-family:Verdana;
text-align:right;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
.div2 {
background-color:lightgreen;
font-family:Verdana;
text-align:left;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
<div class="div1">
<h1>Hey</h1>
</div>
<hr>
<div class="div2">
<h1>Hello</h1>
</div>
jsfiddle
As you can see, I tried to put a hr between the two divs. This is good, except for the white space around the black line that I want. I know it's supposed to be like this, but is there a way to get just the black line?
Simple use margin: 0 to hr element:
hr{
margin: 0;
}
.div1 {
background-color:skyblue;
font-family:Verdana;
text-align:right;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
.div2 {
background-color:lightgreen;
font-family:Verdana;
text-align:left;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
hr {
margin: 0;
}
<div class="div1">
<h1>Hey</h1>
</div>
<hr>
<div class="div2">
<h1>Hello</h1>
</div>
I made a div have class footer and want footer to be in the end of the page not fixed actually.
it is showing when the data of content element finish , i mention min-height of content equal t 90% so that if there is no more data then also in this case footer should be end of the page.
here is my css code
.header-cont
{
width:100%;
position:absolute;
top:0px;
}
.header {
height:50px;
background:#3399FF;
border:1px solid #CCC;
width:100%;
margin:0px auto;
text-align:center;
}
.footer{
position:absolute;
text-align:center;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
width:100%;
background-color: #3399FF;
height:35px;
}
.footer-data
{
padding:7px;
text-align:center;
font-size:18px;
}
.content{
min-height:90%;
width:1130px;
background: white;
border: 1px solid white;
top:80px;
margin-right:155px;
margin-top:100px;
margin-left:125px;
}
HTML code
<div class="header-cont">
<div class="header">
</div>
</div>
<div class="content">
</div>
<div class="footer">
<div class="footer-data">
footer data
</div>
</div>