This question already has answers here:
CSS-only masonry layout
(4 answers)
CSS Floating Divs At Variable Heights [duplicate]
(10 answers)
Closed 3 years ago.
I am making a html page and have 3 sort of boxes, i have a 20% width(named single-box) and 40% width called double-box (both have hight 33%).
The other bbox is 100% height( named foto-box), 40% width.
Now i want to float next to eachother: double-box, singel-box, foto-box.
Then i want all single boxes, but the single bbox is getting under the 100% of the foto-box. How can i
html, body{
height: 100%;
background-color: #c5c5c5;
}
.screen{
width: 98%;
height: 98%;
margin: 1% 1% 1% 1%;
}
.dubble-box{
width: 40%;
height: 33%;
background-color: aqua;
float: left;
}
.single-box{
height: 33%;
width: 20%;
background-color: black;
float: left;
}
.picture-box{
width:40%;
height: 100%;
background-color: bisque;
float: left;
}
<!DOCTYPE html>
<html>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="reset.css"><!--resets css to default-->
<link rel="stylesheet" href="main.css"><!--gives css to page-->
<link rel="shortcut icon" href="lb.png" type="image/png">
<body>
<div class="screen">
<div class="dubble-box">
<p> levi</p>
</div>
<div class="single-box"></div>
<div class="picture-box"></div>
<div class="single-box"></div>
</div>
</body>
Picture
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 8 months ago.
I want my first element to be on the left and my second element to be in the exact center of the screen (while being horizontally aligned). Logo/text left, navigation bar in the middle.
I cant seem to get the following result with the code below:
|red|-------|green|------------|
I want the center of the Green square in the middle of the screen. Which would normally happen if I used text-align: center; on a single element if its not inline-blocked.
HTML:
<body>
<div class="red-color"></div>
<div class="green-color"></div>
</body>
CSS:
.red-color {
background-color: red;
padding: 100px;
display: inline-block;
}
.green-color {
background-color: green;
padding: 100px;
display: inline-block;
}
Would really appreciate any advice, I have been stuck on this for a few days now already. I've tried to wrap them both up in a div and text-align: center; them. but then I cant seem to push the red square back to the left.
And while I can do it by playing with the margins and eyeballing the center, this does not feel like the optimal solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
}
.green-color {
background-color: green;
width: 30%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
u can use flexbox to adjust elements accordingly. I created a main-div then gave height and width and then its has green and red div's , I applied flex property to main and gave width to each div so , by adjusting the width u can change the position of logo or navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">`enter code here`
<title>Document</title>
</head>
<style>
.main{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.red-color {
background-color: red;
width: 30%;
margin-right: 5%;
}
.green-color {
background-color: green;
width: 30%;
margin-left: 10%;
}
</style>
<body>
<div class="main">
<div class="red-color">logo/text</div>
<div class="green-color">navbar</div>
</div>
</body>
</html>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I went to a beginner course on youtube, but Css is not working correctly when is given. I created a div class conatainer and added the following css:
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
.container {
width: 100%;
height: 100%;
background: #42455a;
}
And The Html Code is:
<!DOCTYPE html>
<html>
<head>
<title>DeveOfE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="menu">
</div>
</div>
</body>
</html>
Height/Width percent values are taken from its parent.
Which means you will have to specify 100% height/width to body and html element (since body is a child of html and it takes its height/width from html)
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
background: #42455a;
}
<!DOCTYPE html>
<html>
<head>
<title>DeveOfE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="menu">
</div>
</div>
</body>
</html>
This question already has answers here:
Why top margin of html element is ignored after floated element?
(10 answers)
Closed 2 years ago.
So I applied clear:left to a div and tried changing its top margin but it did not affect anything. Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div1 {
border: 2px solid black;
float: left;
}
.div2 {
clear: left;
border: 2px solid red;
width: 120px;
height: 120px;
margin-top: 320px; /* Why is margin not working?*/
}
</style>
</head>
<body>
<div class="div1">This is suppose to be a first div</div>
<div class="div2">Div2</div>
</body>
</html>
Here is the result :
Now the problem is that the result is same even if I add or remove the top margin. It would be great if you can show me the right answer and also explain why this is happening.
Use of one container like this :
<div class="con" style="overflow: hidden">
<div class="div1">This is suppose to be a first div</div>
</div>
.div1 {
border: 2px solid black;
float: left;
}
.div2 {
border: 2px solid red;
width: 120px;
height: 120px;
margin-top: 100px;
}
<div class="con" style="overflow: hidden">
<div class="div1">This is suppose to be a first div</div>
</div>
<div class="div2">Div2</div>
I am designing a new page using Bootstrap 4. There are 4 elements in the page header, footer and two content boxes(divs). Header and footer will remain at top and bottom respectively (using default bootstrap classes for them) but i want both content boxes should appear in middle of the page both horizontally and vertically regardless of the screen size. One content box beneath the another with space between them. You can refer attached picture for same.
I have tried using flex class of bootstrap but it didn't work out much.
There's a lot of approaches to get this solution. That's a simple one:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Document</title>
</head>
<body>
<header class="container-fluid">HEADER</header>
<main>
<div class="center">
<div id="container-1" class="">DIV 1</div>
<div id="container-2" class="">DIV 2</div>
</div>
</main>
<footer class="container-fluid">FOOTER</footer>
</body>
</html>
CSS
header {
background-color: red;
}
body {
margin-bottom: 60px; /* Margin bottom by footer height */
}
footer {
background-color: green;
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
}
#container-1 {
padding: 100px;
margin-bottom: 150px;
background-color: yellow;
}
#container-2 {
padding: 100px;
background-color: blue;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Result
Divs centered
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I'm trying to find where the white space below my blocks container is coming from. I can fix it by adding a negative margin-bottom, but I'm wondering where it is coming from in the first place. I want it to be on the very bottom border on the container div.
JSFiddle: https://jsfiddle.net/sv7eqoff/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Positioning</title>
<link rel="stylesheet" href="positioning.css">
</head>
<body>
<nav></nav>
<div id="container">
<div id="topbar"></div>
<div id="blocks">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<footer></footer>
</body>
</html>
CSS:
body {
margin: 0px 0px;
}
nav {
height: 100px;
background-color: blue;
width: 100%;
}
#container {
border: 2px solid black;
width: 90%;
margin: 40px auto;
}
#topbar {
width: 100%;
height: 200px;
background-color: lightgray;
}
#blocks div {
width: 200px;
background-color: lightgray;
height: 200px;
display: inline-block;
margin-top: 5px;
}
footer {
height: 100px;
background-color: blue;
width: 100%;
}
It's because those DIVs are inline-block; elements, which are aligned at the baseline (like text), meaning that some whitespace below that baseline is reserved for those parts of the letters which go under the line (like in letters g, j, p etc.).
You can avoid that by using vertical-align: top on inline-block elements.