Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
Related
Sorry for bad english. How do you align this image to center and adding space on top after the header and for the footer.
Image Link (bc new user)
If I tried this code
margin-left: auto;
margin-right: auto;
width: 50%;
it goes to the center but the background also moves.
What I want is to move the image in the center, having spaces in both header and footer. And background color stays. Below is the code I use.
HTML
<template>
<div class="list">
<headerpc></headerpc>
<dropdown />
<div class="main">
<img src="../home-img/list.png" alt="" />
</div>
<div class="count">
<footerpc></footerpc>
</div>
</div>
</template>
CSS
<style scoped lang="scss">
$font-color: #fff;
.list {
.main {
position: relative;
display: block;
z-index: 1;
background: #131a28;
}
.count {
background: #131a28;
}
}
</style>
you can try giving a specific height to the image and set margin as auto.
img{
width: 300px;
height: 200px;
margin: auto;
}
this will center the image along both axes in its container div.
To center an image, set left and right margin to auto and make it into a block element. here, I have provide the sample code for aligning an image in the center for your reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:10%
margin-bottom:10%
}
</style>
</head>
<body>
<h2>Center</h2>
<img src="img_flower.jpg" style="width:50%;">
</body>
</html>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
This should be simple but I just can't figure it out. I have 3 divs displayed as inline block. Whenever I put an svg image (or any image, for that matter - I linked a jpeg and got the same result but I need to have inline svg in this case) inside of one the divs, it causes the other two divs to move down. What could be causing this? Why are the divs no longer on the same baseline?
Resulting behavior
Here is my (simple) code, less the very lengthy svg bit:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merch</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headingcontainer">
<div class="div1">1</div>
<div class="div2">
<svg
</svg>
</div>
<div class="div3">3</div>
</div>
</body>
</html>
CSS:
.div1, .div2, .div3 {
width: 150px;
height: 150px;
display: inline-block;
}
.div1 {
background-color: red;
}
.div2 {
background-color: blue;
}
.div3 {
background-color: green;
}
Someone please make me feel like an idiot by pointing out what's going on here. :-)
I think if you add vetical-align: top; to the elements it will work. inline-block elements are vertical-align: baseline; unless otherwise specified.
Example:
.div1,
.div2,
.div3 {
width: 150px;
height: 150px;
display: inline-block;
vertical-align: top;
}
.div1 {
background-color: red;
}
.div2 {
background-color: blue;
}
.div3 {
background-color: green;
}
<div class="headingcontainer">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
Just a bit about the default baseline:
Aligns the baseline of the element with the baseline of its parent.
The baseline of some replaced elements, like , is not
specified by the HTML specification, meaning that their behavior with
this keyword may vary between browsers.
I have some simple HTML and CSS written. I'd like to get a list of buttons to the right side of an image.
I've tried using float and display: inline
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
.main{
background: yellow;
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container{
background: pink;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
I've highlighted the container for everything but the footer as yellow. The container holding the buttons are pink. I've done this to help me understand what's happening to the containers as I test things out.
For float, I've tried floating the buttons-container to the right. This results in the buttons going to the right of the page, and it seems to somehow disassociate itself from the main container as it is no longer highlighted in yellow.
I've also tried floating the img to the left. This seems to be the best help so far, except that the yellow background has disappeared. What happened to the rest of my container? I've tried using margin-top to move the buttons down towards the middle of the image but both the image and the button's margins seem to be altered.
Is there a better way to do this? Thank you.
I suggest you use display: flex; to do this. It's much easier to get alignment done with flex This is a sample code.
I have added align-items: flex-start to your controls-container so that it will only take up the space from the top. If you want the container to take the full height along with your image-container feel free to remove that code. Also I have removed your ids and used classes to reference the styles and I would advise you to do the same. Hope it helps you.
HTML
<div class="d-flex flex-column">
<div class="container main">
<div class="image-container">
<img src="img/placeholder.png" />
</div>
<div class="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
<div class="footer">
<h5>
Footer
</h5>
</div>
</div>
CSS
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.main {
background: yellow;
}
.image-container {
width: 1000px;
height: 600px;
}
.controls-container {
display: flex;
flex-direction: row;
background: pink;
}
.footer {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/fq8t3ndw/
The other way around is to use position.I have just tweaked your code, below is the snippet please have a look at it.
.main {
background: yellow;
position: relative
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container {
background: pink;
position: absolute;
right: 0px;
top: 0px;
}
.controls {
display: inline;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
I need 2 div with one is floated left so when we resize the window into a small window the second div will move downward.
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
this code will make the second div overlap with the first div, if I add display:flex in the container it won't overlap anymore but the div size is resizing with the windows size and the second div won't go downward.
What is wrong? I need my div to be exactly 500px.
Thanks :)
From what I understand, you want to make the second div go down after resizing the browser. So you can use media queries for that:
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div:first-child {
float: left;
width: 500px;
height: 500px;
border: 1px solid red;
}
.container div:last-child {
width: 500px;
height: 500px;
border: 1px solid black;
}
#media (max-width: 500px) {
.container div:last-child {
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div>
aaa
</div>
<div>
bbb
</div>
</div>
</body>
</html>
I separated the style of the two divs, and removed the float:left from the inline style. The <meta> is also important for the media query to work. I used clear:both to clear the float of the first div from the second, thus not affecting the second div.
I didn't put this in a snippet because the media does not seem to work there, but is working in my computer
You have to set float in second div also. Or in media query you have to set the display: block in both div. check updated snippet below..
body,
html {
width: 100%;
height: 100%;
}
.container {
overflow: hidden;
}
.container div {
width: 500px;
height: 500px;
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<div class="container">
<div style="float: left">
aaa
</div>
<div style="float: right">
bbb
</div>
</div>
</body>
</html>
I have the following HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Table-cell issue</title>
<style type="text/css">
html, body { height: 100%; }
.table
{
display: table;
height: 100%;
}
.row
{
display: table-row;
}
.aside
{
display: table-cell;
}
.center
{
background-color: red;
display: table-cell;
width: 100%;
}
.wide
{
background-color: green;
width: 16000px;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="aside">
Left column
</div>
<div class="center">
<div class="wide"> </div>
</div>
<div class="aside">
Right column
</div>
</div>
</div>
</body>
</html>
The problem is that the div.center stretches to fit its content, while the div.table is meant to occupy the whole viewport, and the rest of the div.center's content should be invisible. Neither overflow:hidden nor explicit width setting in pixels (900px, for instance) helps.
I would be very grateful for any idea on how to fix the issue.
Use table-layout:fixed on the table div. This disables the automatic cell resizing and will make the center only as wide as you allow it to be.