So I'm trying to set the height of the "content" class but it doesn't seem to be working. I'm quite a noob at nested DIVs and I've tried the fixes that I've found googling but nothing seems to work. Help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Website Horizontal Scrolling with jQuery" />
<meta name="keywords" content="jquery, horizontal, scrolling, scroll, smooth"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<style>
body {
background-mage: url(bg.jpg), url(bgrepeat.jpg);
background-repeat: no-repeat, repeat-x;
background-attachment:fixed;
background-position:left bottom;
background-color: #D3C8B6;
}
#wrapper {
text-align: center;
width: 100%;
position:absolute;
bottom:0;
}
#header,
#main,
#sidebar,
#footer {
display:inline;
position:relative;
float:left;
}
#header,
#footer {
width:100%;
background-color:#eee;
opacity:1.0;
filter:alpha(opacity=100);
}
#header {
margin-bottom:1%;
height:100px;
}
#footer {
margin-top:1%;
height:40px;
}
#main {
width:20%;
height:475px;
margin-right:1%;
text-align: center;
background-color:#eee;
opacity:1.0;
filter:alpha(opacity=100);
}
#sidebar {
width:79%;
height:475px;
overflow: hidden;
}
.viewport{
width:100%;
height:475px;
overflow-x:scroll;
}
.inside{
width:9000px;
height:200px;
}
.inside div{
height:450px;
width:700px;
float:left;
margin-right:4px;
}
.content {
height:100px;
width:300px;
overflow-y: scroll;
position:relative;
top: 10px;
right:10px;
}
.one{
background-image: url(images/frame.png)
}
.two{
background-image: url(images/frame2.png);
text-align:center;
z-index: 1;
}
.three{
background-image: url(images/frame1.png);
}
.four{
background-image: url(images/frame3.png);
}
.five {
background-image: url(images/frame4.png);
}
</style>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="main">
<div class="one-l">Home</div>
<div class="two-l">Portfolio</div>
<div class="three-l">Resume</div>
<div class="four-l">Blog</div>
<div class="five-l">Contact</div>
</div>
<div id="sidebar">
<div class="viewport" >
<div class="inside" >
<div class="one">home</div>
<div class="two">
<div class="content" width="200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum, leo vitae ornare dignissim, lorem urna tempor felis, in fringilla urna justo non velit. Cras imperdiet viverra ligula, vitae auctor neque elementum eget. In nec quam est, quis molestie magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida, elit a iaculis consequat, ligula nisl cursus turpis, in giat eu placerat vel, viverra vel nibh. Ut vitae felis ac nisi euismod porta. Aliquam et gravida mauris. Maecenas id massa ligula, et blandit orci. In hac habitasse platea dictumst. Donec eu tortor libero. Donec eget leo mi. Mauris quis neque vitae massa facilisis placerat ut et felis. Nullam eleifend faucibus diam, sit amet pellentesque leo euismod id. Morbi interdum placerat nibh, in mattis sem eleifend quis. Nunc non nunc sed lorem condimentum molestie mattis blandit dui. Nulla urna ligula, auctor id venenatis eu, placerat ut dui. In fringilla purus gravida sapien cursus imperdiet porta ligula lobortis. Sed pellentesque, nisi quis tristique pulvinar, justo odio sollicitudin risus, non euismod dui ante nec tortor.
</div></div>
<div class="three">resume</div>
<div class="four">blog</div>
<div class="five">contact</div>
</div>
</div>
This is happening because the height property defined in .inside div takes precedence. In this case, to make the height property work inside class .content you must do something like this:
.content
{
height: 200px !important;
}
You can see a Demo at JS Bin: http://jsbin.com/exucek/1/edit
Try changing the height property value to see it being applied in real time. You'll see that when the value is too small, scroll-bars appear.
If you're curious about that !important CSS rule, take a look here:
What does !important mean in CSS?
Your CSS will use whatever the most specific rule is.
You have specified a height on
.inside div
which is more specific than
.content
where you are also setting a height.
In order to have your CSS use the height you have set for .content, you need to make the selector more specific, like so:
.inside div{
height:450px;
width:700px;
}
.inside .content {
height:100px;
width:300px;
}
that should do the trick.
you have a mistake in your code!
replace <div class="content" style=" width:200px;" > with
<div class="content" width=200 >
or change your css code:
.content {
height:200px;
}
Related
I am trying to create a layout where an element (.figure) is center aligned when it is shorter (in height) than its container (.timeline-content). But I want the element to have the same height as its container when it is longer than its container.
The height of the container itself depends on its parent.
This image should help clarify the desired behavior.
This is what I have right now, I don't quite understand why img extends past its parent even though its max-height: 100%
https://jsfiddle.net/kgdkyte4/3/
html{
position: relative;
}
.timeline-item{
width: 100%;
overflow:hidden
}
.timeline-content{
width: 50%;
float: left;
text-align: right;
}
.timeline-image{
display:flex;
align-items: center;
position:absolute;
right: 0;
width: 50%;
height:100%;
}
.figure{
width:100%;
max-height: 100%;
margin: 0;
position:relative;
}
img{
max-height:100%;
max-width:100%;
float:left;
}
<div class="timeline-item">
<div class="timeline-content">
<h3 class="timeline-title">Blah blah blah
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
</p>
</div>
<div class="timeline-image">
<figure class="figure">
<img src="http://via.placeholder.com/550x900">
<figcaption class="figure-caption">blah
</figcaption>
</figure>
</div>
</div>
Without knowing what you're trying to accomplish with the caption, this is the closest I've gotten. Update info on the caption and I'll see what more I can do.
*{
box-sizing:border-box;
margin:0;
padding:0;
}
.timeline-item{
width: 100%;
position:relative;
}
.timeline-leftbox{
width:50%;
text-align:right;
padding:0 8px;
}
.timeline-rightbox{
position:absolute;
height:100%;
width:50%;
top:0;
right:0;
overflow:hidden;
white-space:nowrap;
}
.timeline-rightbox::after{
content:"";
display:inline-block;
height:100%;
width:0;
vertical-align:middle;
}
.timeline-rightbox img{
max-height:100%;
max-width:100%;
width:auto;
height:auto;
vertical-align:middle;
}
<div class="timeline-item">
<div class="timeline-leftbox">
<div>
<h3 class="timeline-title">Blah blah blah</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.
</p>
</div>
</div>
<div class="timeline-rightbox">
<img src="http://via.placeholder.com/550x900" />
</div>
</div>
You can create a caption space under the image using calc css:
https://jsfiddle.net/freer4/r08ujx5p/3/
I'm trying to make a responsive web layout. On the front page there is a div, with two divs in it. One for the caption and one for the image. The caption should stay next to the image at all times, but the image and caption should scale for smaller screens.
Here is my html;
<div class="content">
<div class="caption">
<h1>Blablabla</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac ipsum quam, semper volutpat massa. Cras mattis malesuada sagittis. Cras luctus erat quis orci condimentum quis vulputate lectus venenatis. Proin lorem lorem, vehicula in porta id, facilisis id massa. Phasellus venenatis eros et diam dictum faucibus. Donec at rutrum orci. Vivamus quam sapien, mollis sed aliquet blandit, viverra nec enim. In sapien lectus, fringilla pretium sollicitudin eu, eleifend id mi. Phasellus ullamcorper massa vitae mauris</p>
</div>
<div class="image">
<img src="pics02.jpg">
</div>
</div>
And this is my css;
.content {
margin: 0px auto;
width:60%;
background-color:black;
margin-top:4em;
display:block;
}
.caption {
width:30%;
background-color:white;
height: auto;
display:inline;
margin:0px;
color:green;
float:left;
padding:6px;
display:block;
}
.image {
display:inline;
margin:0px;
float:right;
display:block;
}
.image img {
max-width:100% !important;
max-height:100% !important;
display:block;
}
In another topic here on stack I found that I should set the img tag with a max width and height and set the display to block everywhere.
Unfortunately that doesn't work when I'm scaling, the image gets smaller when you scale but it slides underneath the caption.
just add this to your image css class:
.image {
display:inline;
margin:0px;
float:right;
display:block;
width: 60%;
}
Hope this is what you want.
Otherwise, if you can update this example with real picture etc, we can help so much more: http://jsfiddle.net/BJ8gK/30/
Live Demo
Why are you used to multiple value
.caption {
width:30%;
background-color:white;
height: auto;
display:inline; // used to any one value
margin:0px;
color:green;
float:left; // used to any one value
padding:6px;
display:block; // used to any one value
}
Used to one property in your class .caption
do't used to multiple display value in a single class
I think You want to this Live Demo
I have this situation where i am unable to put an image on the right of a page, witch will bleed out if view port area is smaller than necessary space available.
HTML
<div class="relative-container">
<div class="content1">
<p>Lorem ipsum dolor sit amet</p>
<img alt="" src="http://placehold.it/64x64" />
<p>Lorem ipsum dolor sit amet, etiam iaculis, amet lacinia ultricies voluptatem, wisi mauris, ea quisque est nullam amet, vel libero. Eget pretium quis sed. Ad mattis, dolore ut non molestie et, quis pulvinar, orci luctus placerat lobortis donec scelerisque, nulla lorem. A luctus sed gravida, nullam ante dictum ipsum purus, inceptos <strong>the right image is supposed to come under this paragraph, just a little</strong>.</p>
<img alt="" src="http://placehold.it/64x64" />
</div>
<div class="content-outofport">
<img alt="" src="http://placehold.it/128x64/f00000/000/&text=out%20of%20port" />
</div>
<div class="content2">
<img alt="" src="http://placehold.it/64x64" />
<p><strong>This paragraph won't be affected by imge position</strong>Lorem ipsum dolor sit amet, etiam iaculis, amet lacinia ultricies voluptatem, wisi mauris, ea quisque est nullam amet, vel libero. Eget pretium quis sed. Ad mattis, dolore ut non molestie et, quis pulvinar, orci luctus placerat lobortis donec scelerisque, nulla lorem. A luctus sed gravida, nullam ante dictum ipsum purus, inceptos mauris porta semper, habitant at mi vulputate. Eget parturient. Suspendisse donec ante est nullam magna, nisl leo vitae vitae. Sequi nec lacinia dui magna, accumsan justo augue, sed nunc penatibus commodo. Porttitor vestibulum nibh, donec at nunc eros vitae mollis.</p>
<img alt="" src="http://placehold.it/64x64" />
</div>
CSS
.relative-container {
position:relative
}
.content1 {
border:2px solid #fee;
z-indez:1
}
.content2 {
border:2px solid #eef;
}
.content-outofport {
background-color:#fcc;
border:2px solid #efe;
height:64px;
position:relative;
right:0;
z-indez:0;
overflow:visible;
margin-right:111px;
right:0;
width:100%;
}
.content-outofport img {
position:absolute;
right:-110px;
top:-111px;
}
jsFiddle : http://jsfiddle.net/zUaAq/1/
From SO, those didn't help:
Positioning an element that can overflow outside the viewport without triggering a scrollbar?
How to push an element outside the screen without the browser just expanding the viewport?
How to position an element just off the top of the browser viewport using only css?
At first, i want to avoid javascript
On the jsFiddle example, the redish <div> is not supposed to be visible.
On the actual development context, only the <div class="content-outofport"> is manageable (has html writing access, but i wont be able to move/format other elements from html markups except applying .css on them.)
Head itch?
http://jsfiddle.net/zUaAq/4
.relative-container {
overflow: hidden;
}
If the idea was to keep the red image in the page when possible, you might do this:
http://jsfiddle.net/zUaAq/6/
.content-outofport img {
left: 400px;
}
Of course, you'll want to set the left position depending on the image and container widths.
User isherwood directed me to a proper answer.
HTML
is the same
CSS
.relative-container {
position:relative;
/* THIS WAS IT and ONLY IT */
overflow: hidden;
}
.content1 {
border:2px solid #fee;
z-index:22;
position:relative;
}
.content2 {
border:2px solid #eef;
position:relative;
}
.content-outofport {
background-color:#fcc;
border:2px solid #efe;
height:64px;
position:relative;
right:0;
z-index:0;
overflow:visible;
margin-right:111px;
right:0;
width:100%;
min-width:777px;
max-width:999px;
right:0;
}
.content-outofport img {
position:absolute;
right:0px;
top:-141px;
}
As shown on this jsFiddle
I'm using this layout to create a 2 column fluid web page.
What I can't seem to do is make it so that both the columns in the layout have a height of 100% therefore pushing the footer to the bottom of the page!
Whats the best way to achieve this effect?
Thanks in advance!
Last time I read about this the best answer was display: table; for the main container and display: table-cell; for each column. This will make the column the height that you specify.
#wrap {
background: orange;
display: table;
height: 88%;
width: 550px;
padding: 11px;
}
#col1 {
display:table-cell;
background: #808080;
width: 222px;
border: 1px solid #FFF;
padding: 12px;
}
#col2 {
display:table-cell;
background: #808080;
width: 111px;
border: 1px solid #FFF;
padding: 12px;
}
<!-- this container will determine the height of both columns -->
<div id="wrap">
<div id="col1">
<p>Lorem ipsum something or other.</p>
</div>
<div id="col2">
<p>More Lorem than ipsum.</p>
</div>
</div>
<!-- end container -->
hopefully this is what you're looking for:
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
Try a different layout, why waste your time trying to hack a cross-browser solution?
This seems to be what you need, but I'm sure you can find others: http://www.savio.no/examples/three-column-layout-6.asp
I do the following in my personal site's CSS file:
#footer
{width: 100%;
bottom: 0px;
padding-top: .5em;
padding-bottom: .5em;
background-color: #ffffff;
border-top: 1px #000000 solid;
text-align: center;
margin-top: .25em;
}
Also, I have little in the way of nested div tags. I prefer to have the elements float around each other.
have 2 div tags, each as a column floating next to each other, and another div tag to clear the floats, then lastly another div to be the footer:
<div id="col1"></div>
<div id="col2"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:80%;
}
#col2{
float:right;
width:20%;
}
.c{
clear:both;
}
#footer{}
--></style>
With this, it's also easier to make it a 3 column.
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
float:left;
width:200px;
}
#col2{
float:right;
width:300px;
}
#col3{
width:400px;
margin-left:200px;
margin-right:300px;
}
.c{
clear:both;
}
#footer{}
--></style>
Here's another way...
<div id="container">
<div id="col1"></div>
<div id="col2"></div>
</div>
<div id="footer"></div>
<style type="text/css"><!--
body { height: 100% }
#container { height: 100% }
#col1 { height:100%; float:left; width: 70% }
#col2 { height:100%; float:right; width: 30% }
#footer { height: 50px; clear: both }
--></style>
Just made jsfiddle by Matthew James Taylor post. For me it was very useful. I think this is not a problem to remade for two column.
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1"><p>Column 1</p>
<p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis
hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,
magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus
proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum
eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut
porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc
in nec, dictumst
pulvinar proin! In nisi pulvinar penatibus lorem nec, tempor porta
ultricies, et monte.a asdfjasdjfklasdfasdfljsdfkj</p>
</div>
<div id="col2">
<p>Column 2 </p>
<p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
turpis dictumst mattis! Turpis ac ut nec nec et augue, in nec turpis
hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,
magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus
proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum
eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut
porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc
</div>
<div id="col3">Column 3</div>
</div>
</div>
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
Try : overflow:hidden; on the wrap .
Hope That Helps
I want to create a DIV with a header of 6px height and inside the div body, I want to align an Image and Text next to each other. The height of the DIV body should be fixed.
Here's a very simple example of how to do what you want (using inline styles):
<div>
<div style="height:6px;width:500px;background-color:#3399CC;"></div>
<div style="clear:both"/>
<div style="float:left"><img src="http://www.google.com/intl/en_ALL/images/logo.gif"/></div>
<div style="float:left">Your Text Here</div>
</div>
<div style="clear:both"/>
You can test this code and try editing it in real time here: http://htmledit.squarefree.com/.
Try creating a html page with the following code:
<html>
<head>
<style type="text/css">
body {
text-align: center;
}
#container {
margin-right: auto;
margin-left: auto;
width: 200px;
height: 200px;
background: #acf;
}
#header {
background: #f98;
padding-bottom: 1px;
}
#container img {
background: #000;
float: left;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Heading</h1>
</div>
<img src="image.jpg" alt="" height="25" width="25" />
<p>Text text text</p>
</div>
</body>
</html>
Building on Jon. A 6px header is mighty darn small!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Div layout</title>
<style type="text/css">
/*<![CDATA[*/
#container {
margin:0 auto;
width:400px;
height:300px;
overflow:scroll;
background:#acf;
padding:0;
}
#container h1 {
background:#f98;
padding:0 0 1px 0;
height:6px;
font-size:2px;
text-align:center;
font-weight:normal;
border:3px #FFA500 outset;
}
#container img {
background:#000;
float:left;
padding:10px;
margin:10px;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<h1>Heading</h1><img src="image.jpg" alt="" height="25" width="25" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Nulla sit amet tellus vel augue
hendrerit pellentesque. Aenean cursus, quam nec volutpat interdum, nibh
sapien elementum mi, id accumsan neque risus a est. Praesent libero
metus, tincidunt at, vulputate eu, vehicula at, arcu? Donec orci metus,
ornare non, viverra vel, vehicula ac, dui. Aliquam erat volutpat. Fusce
malesuada urna quis augue. Mauris in purus. Maecenas at est. Nunc
vestibulum feugiat justo. Etiam nec urna. Nulla facilisi. Ut enim.
Nullam sit amet mauris eu quam eleifend vestibulum! Cras lectus turpis,
cursus nec, fermentum egestas, fermentum non, tortor.</p>
</div>
</body>
</html>