I am now embedded the style tag into my CSS and have also added max-height:90% as suggested but the div element is still overflowing into other elements. what am I doing wrong???
<head>
<style>
.atlas.region-map
{
border: 2px solid #716E64;
max-width: 500px;
overflow: hidden;
margin: 0;
float: left;
}
.atlas.map-content.info-col
{
margin-left: 549px;
width: 335px;
}
.atlas.map-content.info-col p
{
color: #5c5642;
margin-top: 15px;
font-size: 12px;
}
.Atlas_Test
{
height: 300px;
font-size: 14px;
overflow-y: scroll;
max-height: 90%;
}
</style>
</head>
<body>
<div class="info-col">
<p>Content to go here!!!</p>
</div>
</body>
Related
This is the portion of my template, CSS is inline for demo purposes only:
.header {
background-color: #333;
color: #FFF;
padding: 30px;
}
.content {
width: 750px;
}
.mc-info {
height: auto;
border: 2px solid;
width: 800px;
height: auto;
margin-top: 20px;
margin-bottom: 20px;
}
.mc-info-image {
width: 240px;
}
.mc-info-image img {
margin-right: 29px;
height: 340px;
float: left;
}
.description {
font-size: 16px;
float: right;
}
.vehiname {
font-size: 18px;
color: green;
}
.price {
color: red;
}
footer {
color: #333;
background-color: blue;
}
It's been causing problems with getting text and images to align properly, as images and DIV overrun, as seen at https://jsfiddle.net/r7podhq6/- the div does not resize with the content, even though a standard image is set.
I'm trying to do something like this for my layout, although with the bordered DIV's I'm using and keeping class mc-info at the width set.
Should I convert to flex or grid for this? If not, how could I improve this?
My problem is getting text and images to align for this basic template for a car dealer platform.
Looking for help and constructive criticism./
You should really consider learning CSS flex and grid. using float to align divs is not the best practice in 2021.
I have added display: flex to .mc-info and removed all the float properties and max-width:100% to auto scale.
.mc-info {
display: flex;
}
.mc-info-image {
max-width: 800px;
}
img {
max-width: 100%;
}
.info-wrapper {
padding-left: 20px;
}
And lastly wrapped the car information in <div class="info-wrapper"> </div>
Final code
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<body>
<title>YourLeisure Motorhomes & Caravans</title>
<style>
.header {
background-color: #333;
color: #FFF;
padding: 30px;
}
.content {
width: 750px;
}
.mc-info {
display: flex;
height: auto;
border: 2px solid;
max-width: 800px;
height: auto;
margin-top: 20px;
margin-bottom: 20px;
}
.mc-info-image {
max-width: 800px;
}
.mc-info-image img {
margin-right: 29px;
height: 340px;
}
.description {
font-size: 16px;
float: right;
}
.vehiname {
font-size: 18px;
color: green;
}
.price {
color: red;
}
footer {
color: #333;
background-color: blue;
}
img {
max-width: 100%;
}
.info-wrapper {
padding-left: 20px;
}
</style>
</head>
<body>
<div class="header">
<h1>YOURLEISURE MOTORHOMES</h1>
<h2>49 High Street, Northtown</h2>
</div>
<div class="content">
<div class="mc-info">
<div class="mc-info-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/VW_T5_California_front_20071215.jpg/800px-VW_T5_California_front_20071215.jpg">
</div>
<div class="info-wrapper">
<div class="vehiname">
<h2>VOLKSWAGEN CALIFORNIA 2.0 BITDI 180</h2>
</div>
<div class="price">
<h2>£45,000</h2>
</div>
<div class="description">
This example has all the equipment you could want
</div>
</div>
</div>
<div class="mc-info">
<div class="mc-info-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Ford_Transit_FT_130_Camper_%2818418440689%29.jpg/1024px-Ford_Transit_FT_130_Camper_%2818418440689%29.jpg">
</div>
<div class="info-wrapper">
<div class="vehiname">
<h2>FORD TRANSIT CAMPERVAN 2.0</h2>
</div>
<div class="price">
<h2>£1,000</h2>
</div>
<div class="description">
red/white
</div>
</div>
</div>
<footer>
Content to come
</footer>
</body>
</html>
The answer given by Josh answers your question.
Moreover, i'd recommend you to use flexbox/grid over float. They have a lot of properties that could be really helpful in making a responsive design.
My aside element is positioned at the bottom...it should be on top, at the same level as my section...what I'm doing wrong??? I want these two columns to be at the same level, so I used floats in both, section and aside, but obviusly is not working...please help!
And also I can't
My HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout with Floats</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<body>
<header>
<h1>Leonardo da Vinci</h1>
<nav>
<ul>
<li><a>Inicio</a></li>
<li><a>Bio</a></li>
<li><a>Obras</a></li>
<li><a>Legado</a></li>
</ul>
</nav>
</header>
<section>
<div class="columnas">
</div>
<div class="columnas">
</div>
<div class="columnas">
</div>
<div class="columnas">
</div>
</section>
<aside>
<div>
</div>
</aside>
</body>
</html>
My CSS code:
header {
background: black;
color: white;
overflow: hidden;
}
header h1 {
text-align: center;
width: 50%;
margin: 0 auto;
padding: 55px 0 0 0;
text-transform: uppercase
}
header ul {
padding: 0;
list-style: none;
overflow: hidden;
text-align: center;
}
header ul li {
width: 50%;
margin: 0 auto;
display: inline;
text-transform: uppercase;
padding: 5px;
}
section {
width: 45%;
overflow: hidden
float: left;
}
section .columnas {
background: red;
width: 280px;
height: 200px;
margin: 15px 15px 0 0;
float: left;
}
aside {
width: 30%;
float: right;
}
aside div {
background: blue;
width: 200px;
height: 200px;
If I understand it properly, and if this is the solution you want, you were just missing a semi-colon after hidden.
section {
width: 45%;
overflow: hidden
float: left;
}
You can add margin-top: 15px to aside to get it at the exact level.
aside {
width: 30%;
float: right;
margin-top: 15px;
}
Before you roll your eyes and move on, I know how to solve this problem by using a fixed height and absolution positioning with top: and bottom:, but I want to solve it without using fixed heights. I want to learn more about CSS so I'm trying to solve this a different way.
I have set up a typical navbar running across the top, and then a scrolling content div below.
However! How do I fit the bottom scrolling div container to the remaining space without using absolute coordinates? I can't do position: absolute, because then I'd need to know the height of the navbar to set "top:". And I can't do "bottom: 0" because I'd have to specify a height.
Here's the JS filddle:
http://jsfiddle.net/8dugffz4/1/
The class of interest is ".result". I currently have the height fixed, which I don't want.
Thanks, y'all.
PT
CSS:
* {
font-family: Helvetica, Sans;
border: 0px;
margin: 0px;
padding: 0px;
}
.navBar {
width: auto;
overflow: auto;
border-bottom: 1px solid #bbb;
}
.pageBar {
float: right;
}
.pager {
cursor: pointer;
float: left;
border: 1px solid #bbb;
width: 2em;
height: 2em;
line-height: 2em;
text-align: center;
margin: 5px;
margin-left: 0px;
background: #eee;
color: #bbb;
}
.pager:hover {
background: #777;
border: 1px solid black;
color: white;
}
.fliph {
-ms-transform:scale(-1,1); /* IE 9 */
-moz-transform:scale(-1,1); /* Firefox */
-webkit-transform:scale(-1,1); /* Safari and Chrome */
-o-transform:scale(-1,1); /* Opera */
}
.results {
background: gray;
width: 100%;
height: 200px;
overflow: scroll;
}
.line {
height: 10em;
line-height: 10em;
border: 1px solid red;
}
HTML:
<body>
<div class='navBar'>
<div class='pageBar'>
<div class='pager'>◁</div>
<div class='pager'>1</div>
<div class='pager fliph'>◁</div>
</div>
</div>
<div class='results'>
<div class='line'>Line1</div>
<div class='line'>Line2</div>
<div class='line'>Line3</div>
<div class='line'>Line4</div>
</div>
</body>
Here's a solution that uses display: table and can actually achieve fluid heights:
http://jsfiddle.net/8dugffz4/8/
And a minimalistic snippet in case you want to see specifically what I did:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#table {
display: table;
height: 100%;
width: 100%;
}
#table > div {
display: table-row;
}
#navbar {
height: 45px;
opacity: .5;
}
#navbar > div {
height: 100%;
background: black;
}
#results {
height: 100%;
}
#results > div {
height: 100%;
overflow: auto;
background: green;
}
<div id="table">
<div id="navbar">
<div></div>
</div>
<div id="results">
<div></div>
</div>
</div>
If you're just looking for an alternative to the position: absolute method, you could use the height: 100% method:
html, body { height: 100%; }
body { box-sizing: border-box; padding-top: 45px; }
.navBar { height: 45px; margin-top: -45px; }
.results { height: 100%; }
Like so: http://jsfiddle.net/8dugffz4/7/
I have hardly written any HTML/CSS and am already encountering a problem. My header element is not automatically expanding it's height to wrap it's children. I've done a bunch of research and fooled around in the Developer Tools, but can't seem to put my finger on it. I'm sure it's really simple, but what is it I'm overlooking here?
<!DOCYTPE html>
<head>
<title>Page Title</title>
<style>
header {
width: 96%;
height: auto;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
section {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
footer {
width: 96%;
position: relative;
margin: 1em auto;
border: 1px solid gray;
border-radius: 5px;
padding: 1em;
}
h1 {
font-size: 2em;
margin: 1em auto;
}
img {
max-width: 100%;
/* This tells the browser to set the image to the full-width of it's containing element. */
}
.group-icon {
width: 10%;
position: relative;
float: left;
margin: 0 1% 0 0;
}
.group-name {
position: relative;
float: left;
}
</style>
</head>
<body>
<header>
<div class="group-icon">
<img src="images/sailing-icon.png">
</div>
<div class="group-name">
<h1>Pirates in the Bay</h1>
</div>
</header>
<section>
<h2>TEST</h2>
</section>
<section>
<h2>TEST</h2>
</section>
<footer></footer>
</body>
</html>
It's because you've floated elements inside the header (group-name and group-icon).
Try adding overflow: hidden to the header styles. The will 'clear' the floated elements effectively.
See the demo here.
http://jsbin.com/EPelEMA/1/edit
Some more information about the overflow property here: http://css-tricks.com/the-css-overflow-property/
I'm having difficulty achieving this. I would like the div content1 and content2 to fill up the remaining space vertically in a window with a set minimum height.
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
height:100%;
}
body {
background-color: #E1E1E1;
}
</style>
<style type="text/css">
.container {
width: 965px;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.sidebar1 {
float: left;
width: 200px;
background: none;
padding-bottom: 10px;
} .content {
padding: 10px 0;
width: 380px;
height: 100%;
background: #fff;
float: left;
position: relative;
} .content2 {
float: left;
width: 380px;
height: 100%;
background: #fff;
padding: 10px 0;
}
-->
</style>
Here are the divs I'm trying to resize (currently empty but I would like them to fill up the window vertically):
<div class="content" style="border-left: solid 1px #CCC;"></div>
<div class="content2"><!-- end .sidebar2 --></div>
You need 100% height on the html tag as well
html { height: 100%; }
See: http://jsfiddle.net/wJ73v/
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
<style>
html {height: 100%;}
body {height: 100%; margin: 0; padding: 0;}
div {border: 1px solid #000; height: 100%; float: left;}
</style>
</head>
<body>
<div id="foo">a</div>
<div id="bar">b</div>
</body>
</html>
Proper DOCTYPE is necessary, I think, since otherwise browsers go to so called quirks mode.