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.
Related
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.
All my searches tell me to make the img {max-height: 100%} but that doesn't seem to have any effect.
I don't understand if I've set the height of the parent container (earth-block), why setting the img height won't constrict the image to that size.enter image description here
.earth-block {
height: 200px;
}
.earth-block img{
max-height: 100%;
}
<div class="earth">
<div class="wrapper">
<div class="earth-block"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZj1KyXPz468xvFWikAXA-dPkMu14q-XuB3dKKl9LF6Bl4SO-oTw&s" alt="earth"></div>
</div>
</div>
this ll help you out
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.earth-block {
height: 200px;
background-color: aliceblue;
display: flex;
}
.earth-block img{
flex-grow: 100;
object-fit: none;
object-position: center;
}
</style>
</head>
<body>
<div class="earth">
<div class="wrapper">
<div class="earth-block"><img src="https://cdn.pixabay.com/photo/2016/10/20/18/35/sunrise-1756274__340.jpg" alt="earth"></div>
</div>
</div>
</body>
</html>
div element is block element and default display property is block , to display it in line , inline-block property can be used.
<!DOCTYPE html>
<html>
<head>
<title>Pictures</title>
<style type="text/css">
.row {
height: 50px;
width: 50px;
}
.row1 {
padding-bottom: 12px;
display: inline-block;
float: left;
padding-right: 14px;
}
.row2 {
display: inline-block;
}
}
#img1 {
max-width: 50%;
max-height: 20%;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="content">
<div class="row">
<div class="row1">
<!--img height="50px" width="50px" src="images/image1.jpg"-->
hello
</div>
<div class="row2">
Beutiful picture clicked by photographer
</div>
</div>
</div>
</body>
</html>
I don't understand why these 2 divs are not getting display side by side , i am using inline-block but still no help.
It is because the .row has width so less such that it can't accomodate both div. Try this it will make both parallel.
.row {
height: 50px;
width: 1000px;
}
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>
Say I have 2 divs next to each other in a container of fixed width. Horizontally next to each other that is. Then say one div is removed, how can i get the other div to fill up the space next to it where the other div was? As in it should expand its width.
Here's a way to do it without Javascript.
I don't think this will work in IE... I've tested it in Chrome, Firefox and Safari, but this might work for you.
Here is a fiddle for it.
CSS:
#container {
width: 400px;
}
#left {
width: 200px;
height: 200px;
background: #ddd;
float: left;
}
#right {
width:100%;
float: right;
height: 200px;
position: relative;
background: #CCC;
}
#left + #right {
width: 200px;
}
Javascript:
function removeElement(divNum) {
var d = document.getElementById('container');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}
HTML:
<div id="container">
<div id="left"></div>
<div id="right"></div>
<input onclick="removeElement('left')" type="button" value="X"/>
</div>
You can use jQuery to manipulate the CSS properties and visibility. In this example I alter the widths.
You can do it with display: table; but it won't work in IE 7 and below. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test div</title>
<style type="text/css">
#container {
width: 400px;
display: table;
}
#row-container {
display: table-row;
}
#left, #right {
display: table-cell;
height: 200px;
}
#left {
background-color: red;
}
#right {
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="row-container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>