I'm trying to make a website with multiple sections and I'm encountering an issue in adding padding to the sections. I try to put the padding in the container, but it doesn't affect the individual divs. If I try to do it to the divs, it does it inside and the borders still touch. If I try and put the divs in more divs, it just doesn't go well. Whats going wrong? I'll show you my relative code:
.container {
width: 100%;
height: auto;
padding-top: 5%;
padding-right: 2%;
padding-left: 2%;
}
.secbox {
float: left;
width: 48%;
height: auto;
border: 5px solid red;
padding-top: 2%;
}
<div class="container">
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
</div>
<div class="container">
<div class="sec">
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
</div>
<div class="sec">
<div class="secbox"> </div>
<div class="secbox"> </div>
<div class="secbox"> </div>
</div>
</div>
.container {
width: 100%;
height: auto;
border: 5px solid red;
display:table
}
.sec{
width:50%;
float:left;
box-sizing:border-box;
}
.secbox {
border: 5px solid red;
height: 20px;
margin:5px
}
Sample : Demo Link
Related
<style>
.container{
background-color: lightgray;
text-align: center;
display: inline-block;
position: relative;
border-radius:5px;
}
.itemField{
margin-top:10px;
}
.item {
margin: 10px;
width: 20em;
vertical-align: top;
display:inline-block;
}
.itemInner {
width: 20em;
height: 5em;
margin: 0 auto;
padding: 0.83333333em;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
text-align: left;
position: relative;
white-space: normal;
}
.itemInnerList{
width:fit-content;
background-color: beige;
}
</style>
<div class="container">
<div class="itemInnerList">
<div class="item">
<div class="itemInner ">
<div class="itemInnerText">
Item name 1
</div>
</div>
</div>
<div class="item">
<div class="itemInner ">
<div class="itemInnerText">
Item name 2
</div>
</div>
</div>
<div class="item">
<div class="itemInner ">
<div class="itemInnerText">
Item name 3
</div>
</div>
</div>
<div class="item">
<div class="itemInner ">
<div class="itemInnerText">
Item name 4
</div>
</div>
</div>
</div>
</div>
how can i make sure "itemInnerList" is just wide enough to wrap inner elements in all cases.
itemInnerList container shows like it's wide is 100% , not covers only inner elements .
i draw the boundry in image which i try to make.
i try to make container width, covers only inner elements in all screen width
enter image description here
I have been writing some code for a website, and I'm not able to vertically center text. I have read multiple answers on StackOverflow and other sites about how to vertically center html (mainly using the display:table and display:table-cell methods and the top:50%, transformY method), however, I am not able to implement either of these methods successfully. I have attached my code here, hoping that someone will be able to spot an error of my mine which is causing the code to not work. (In this code, I have used the top:50%, transformY method of vertically centering text). Any help would be greatly appreciated.
HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheet.css">
<title>Game Timer and Scorekeeper</title>
</head>
<body>
<div class="container-fluid">
<div class="row" id="heading">
<div class="col-xs-12">
<div class="positioner">
<h1>Game Timer and Scorekeeper</h1>
</div>
</div>
</div>
<div class="row" id="top-labels">
<div class="col-xs-3 labels teamlabel" id="a-label">
<div class="positioner">
<h2>Team A</h2>
</div>
</div>
<div class="col-xs-6 labels" id="gameclock-label">
<div class="positioner">
<h2>Game Clock</h2>
</div>
</div>
<div class="col-xs-3 labels teamlabel" id="b-label">
<div class="positioner">
<h2>Team B</h2>
</div>
</div>
</div>
<div class="row" id="thirdrow">
<div class="col-xs-3 pointsclock teampoints" id="pointsA">
<div class="positioner">
<h1>POINTS A</h1>
</div>
</div>
<div class="col-xs-6 pointsclock" id="gameclock">
<div class="positioner">
<h1>GAME CLOCK</h1>
</div>
</div>
<div class="col-xs-3 pointsclock teampoints" id="pointsB">
<div class="positioner">
<h1>POINTS B</h1>
</div>
</div>
</div>
<div class="row" id="fourthrow">
<div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolA">
<div class="positioner">
<h2>CONTROL A</h2>
</div>
</div>
<div class="col-xs-6 ptcontclock" id="questionclock">
<div class="positioner">
<h2>QUESTION CLOCK</h2>
</div>
</div>
<div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolB">
<div class="positioner">
<h2>CONTROL B</h2>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.container-fluid {
width: 100vw;
height: 100vh;
}
#heading {
height: 15vh;
border: 2px solid;
}
#top-labels {
height: 10vh;
border: 2px solid;
width: 100vw;
}
#top-labels .labels {
border-right: 2px solid;
border-left: 2px solid;
}
#thirdrow {
height: 40vh;
border: 2px solid;
width: 100vw;
}
#thirdrow .pointsclock {
height: 40vh;
border-right: 2px solid;
border-left: 2px solid;
}
#fourthrow {
height: 35vh;
width: 100vw;
}
#fourthrow .ptcontclock {
border-right: 2px solid;
border-left: 2px solid;
height: 35vh;
}
.positioner{
height:100%;
width:100%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
You can try this.
HTML
<main>
<div>
I'm a block-level element with an unknown height, centered vertically
within my parent.
</div>
</main>
CSS
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
width: 200px;
padding: 20px;
margin: 20px;
display: flex;
flex-direction: column;
justify-content: center;
resize: vertical;
overflow: auto;
}
main div {
background: black;
color: white;
padding: 20px;
resize: vertical;
overflow: auto;
}
<main>
<div>
I'm a block-level element with an unknown height, centered vertically within my parent.
</div>
</main>
check this link for reference https://css-tricks.com/centering-css-complete-guide/
How to put banners side by side using HTML/CSS? Ideally with different sizes as shown below?
One simple way would be to display the banners inline-block, and assign them the required width.
.banner {
display: inline-block;
}
.banner-sm {
width: 32%;
}
.banner-lg {
width: 65%;
}
.banner {
height: 100px;
background: #DDD;
padding: 0; margin: 0;
}
<div class="row">
<div class="banner banner-lg"> </div>
<div class="banner banner-sm"> </div>
</div>
<div class="row">
<div class="banner banner-sm"> </div>
<div class="banner banner-sm"> </div>
<div class="banner banner-sm"> </div>
</div>
<div class="row">
<div class="banner banner-sm"> </div>
<div class="banner banner-lg"> </div>
</div>
Either use some grid system, or the bare CSS float property, pseudo example shown below:
.banner1 {
float: left;
width: 100px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.banner2 {
float: left;
width: 200px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.banner3 {
float: left;
width: 50px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.clearfix {
clear: both;
}
<div class="banner1">banner</div>
<div class="banner1">banner</div>
<div class="clearfix"></div>
<div class="banner2">banner</div>
<div class="clearfix"></div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="clearfix"></div>
Good luck
You can use Twitter Bootstrap to get grid system and other useful layout functionality:
.row div {
height: 30px;
background: #aaa;
border: 1px solid #ddd;
}
* {
box-sizing: border-box;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row'>
<div class='col-xs-8'></div>
<div class='col-xs-4'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-4'></div>
<div class='col-xs-4'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-8'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-8'></div>
<div class='col-xs-8'></div>
<div class='col-xs-4'></div>
</div>
If you are familiar with twitter-bootstrap then use its Grid system otherwise using inline-block will help you.
div {
border: 1px solid #ddd;
height: 200px;
margin: 5px;
display: inline-block;
box-sizing:border-box;
}
<section style="width:650px">
<div style="width:415px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:415px;"></div>
</section>
you can use CSS3 flex-box concept
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
flex-direction:column;
}
.flex-item {
background-color: cornflowerblue;
width: calc(100% - 20px);
height: 100px;
margin: 10px;
display:flex;
justify-content:space-between;
}
.sub{
height:100%;
background:white;
box-sizing:border-box;
}
.one{
width:75%;
border:1px solid green;
}
.two{
width:25%;
border:1px solid red;
}
.subb{
width:33%;
background:white;
height:100%;
}
<div class="flex-container">
<div class="flex-item">
<div class="sub one">sub 1 </div>
<div class="sub two">sub 2 </div>
</div>
<div class="flex-item">
<div class="subb s3">sub 3 </div>
<div class="subb s4">sub 4 </div>
<div class="subb s5">sub 5 </div>
</div>
</div>
You can use Bootstrap to do this.
Bootstarp is a Powerful css framework which enables web developer's
to do stuff like these(dividing screens etc).
Bootstrap is very easy to learn and implement.
You can start Learning Bootstrap here
I'am new into basics of HTML and CSS.
Trying to create 3 x 3 square "picture", using , but can't find simple solution to put squares in the middle of the page, like nine square in center.
How to put all squares in the big bordered square?
How can we achieve this?
HTML:
<body>
<div class="square-one">
</div>
<div class="square-two">
</div>
<div class="square-three">
</div>
<div class="square-four">
</div>
<div class="square-five">
</div>
<div class="square-six">
</div>
<div class="square-seven">
</div>
<div class="square-eight">
</div>
<div class="square-nine">
</div>
</body>
CSS:
body {
background-color: #000000;
font-size: 150px;
}
div {
background: #FFFFFF;
width: 275px;
height: 275px;
margin: 10px 10px 10px 10px;
float: left;
}
Read about display: inline-block CSS property. I think you wants to get the following layout.
body {
background-color: #000;
font-size: 150px;
text-align: center;
}
.square-holder {
border: 1px solid #fff;
display: inline-block;
vertical-align: top;
letter-spacing: -4px;
width: 285px;
font-size: 0;
}
.square {
background: #fff;
letter-spacing: 0;
font-size: 150px;
width: 75px;
height: 75px;
margin: 10px;
display: inline-block;
vertical-align: top;
}
<body>
<div class="square-holder">
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
</div>
</body>
Use text-align - CSS with display - CSS
body {
background-color: #000000;
font-size: 150px;
text-align: center /* add this */
}
div {
background: #FFFFFF;
width: 25px;
height: 25px;
margin: 10px;
/*float: left; */
display: inline-block/* add this */
}
<div class="square-one">
</div>
<div class="square-two">
</div>
<div class="square-three">
</div>
<div class="square-four">
</div>
<div class="square-five">
</div>
<div class="square-six">
</div>
<div class="square-seven">
</div>
<div class="square-eight">
</div>
<div class="square-nine">
</div>
I found a snippet to make a grid of boxes in CSS. It all looks great, but I can't seem to figure out two things.
1) How can I control the height of the boxes? When trying to set height: 100px;, it'll be ignored.
2) How can I make sure that the content of the boxes are placed in the middle of the box? I've tried everything, but with no luck at all... I'm thinking about horizontally and vertically middle of the box...
This is the HTML;
<div id="wrapper">
<div id="wrap">
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
</div>
</div>
This is the CSS;
#wrapper {
width: 60%;
margin: auto;
}
#wrap {
overflow: hidden;
}
.box {
width: 25%;
padding-bottom: 25%;
color: #CC0000;
position: relative;
float: left;
-moz-border-radius: 10px;
border-radius: 10px; /* standards-compliant: (IE) */
}
.innerContent {
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
background: #FFFFFF;
padding: 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; /* standards-compliant: (IE) */
}
.innerContent:hover {
background: #999999;
}
Is this what you're looking for: https://jsfiddle.net/76mywz8j/
Depending on your target browsers, you may be able to use
display: flex;
align-items: center;
Also, you may want to consider taking position: absolute off of .innerContent{}.
I also moved the background color from .innerContent{} to .box{} (and the hover state is now defined on .box rather than .innerContent{} ). That allows you to style box however you want to; by "thinning down" the styles defined on .innerContent{} , it becomes easier to position relative to its container.
Some other suggestions: use shorthand for border-radius. And you don't need border-radius defined on both .box{} and .innerContent{}.
If you want variable height try it.
#wrapper {
width: 100%;
margin: auto;
}
#wrap {
overflow: hidden;
}
.box {
width: 25%;
color: #CC0000;
float: left;
-moz-border-radius: 10px;
border-radius: 10px; /* standards-compliant: (IE) */
margin:auto;
text-align:center;
}
.innerContent {
background: #FFFFFF;
padding: 10px;
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px; /* standards-compliant: (IE) */
padding:40px 0px;
}
.innerContent:hover {
background: #999999;
}
<div id="wrapper">
<div id="wrap">
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
<div class="box">
<div class="innerContent">
This is the content.
</div>
</div>
</div>
</div>