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>
Related
I'm trying to make the image resolution width dictate the width of the container. The trick is that when a p element gets wider than the image, the whole container stretches. What I want it to do is for the p element to respect the width of the image and never stretch the container width more than the image does. I don't want to set a fixed width. Here's a demo:
#outer, #inner{
border-width: 1px;
border-style: solid;
box-sizing: border-box;
padding: 5px;
text-align: center;
}
#outer {
border-color red;
}
#inner { border-color: red; display:inline-block; }
img{max-width:100%;}
.fixed {
width:300px; /*This is what i'm trying to avoid*/
}
<!DOCTYPE html>
<html>
<head>
<title>containers, img, p test</title>
</head>
<body>
<div id="outer">
<div id="inner">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
<div id="outer">
<div id="inner" class="fixed">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
<p>
This is how the first one is supposed to look. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
</body>
</html>
Changing the CSS to inline-block will mean the elements increase with the size of the image.
I added inline-block for just the id img to show you how it can work.
#outer, #inner, #img {
border-width: 1px;
border-style: solid;
box-sizing: border-box;
padding: 5px;
text-align: center;
}
#outer {
border-color red;
}
#inner { border-color: red; display:inline-block; }
#img { border-color: blue;display:inline-block;}
img{max-width:100%;}
.fixed {
width:300px; /*This is what i'm trying to avoid*/
}
<!DOCTYPE html>
<html>
<head>
<title>containers, img, p test</title>
</head>
<body>
<div id="outer">
<div id="inner">
<div id="img">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
<div id="outer">
<div id="inner" class="fixed">
<div id="img">
<img src="http://i67.tinypic.com/24yy8hv.jpg" />
</div>
<p>
This is how the fist one is supposed to look. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus.
</p>
</div>
</div>
</body>
</html>
Hope that is what you were after.
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/
A following html markup creates a QA section in my site.
I want it to be this way - sentence in Q section should be positioned on the same line as "Q" symbol; Sentences in A section should be moved slightly to the right and each sentence should start from new line.
Like this:
But for now it looks this way:
<html>
<head>
<style type="text/css">
.qa b {
font-size: 50px;
}
.qa .answer_box {
margin-left: 90px;
display: inline;
}
.qa p {
font-size: 25px;
}
</style>
</head>
<div class="qa">
<div class="question">
<b>Q</b>
<p>
Do you believe in SEO?
</p>
</div>
<div class="answer">
<b>A</b>
<div class="answer_box">
<p>
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
Would be grateful for your help.
Use float and a padding/margin maneuver, with the b tag replaced with a strong and place within the first p tag per block:
p strong {
float: left;
margin-left: -1.5em;
font-size: 3em;
}
p {
padding-left: 5em;
}
<p>
<strong>Q:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim. Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.
</p>
<p>
<strong>A:</strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non turpis cursus, viverra libero a, ultricies enim.
</p>
<p>Cras quis ornare urna, condimentum luctus lorem. Aliquam et odio et magna pretium molestie. Fusce pulvinar nisi id mi pharetra scelerisque. Sed mollis accumsan tincidunt. Quisque libero erat, gravida sed rutrum et, volutpat non dui. Etiam eget leo in ipsum consectetur iaculis. Vestibulum dictum leo quis tristique feugiat. Donec vestibulum odio placerat, tincidunt orci vel, sagittis nibh. Integer ultricies ultrices ornare. Duis neque ligula, facilisis sit amet metus eget, adipiscing rhoncus justo. Nam fermentum suscipit mauris, nec volutpat augue condimentum ac. Mauris consequat ante sed lacus vehicula scelerisque. In non gravida ligula, at dapibus ligula.</p>
http://jsfiddle.net/userdude/cZJhU/5/
Keep in mind you'll want to use classes to add these styles, not element-level selectors like p and p strong. This is for demonstration purposes only.
NOTE
For those claiming it does not look like what the OP asked for, here is what it appears like in every browser I look at it with:
I just rewrote your code as I couldn't deal with it - this looks exactly how you'd like it to be:
http://jsfiddle.net/f8NjK/
<div class="wrapper">
<div class="leftcol">
<strong>Q</strong>
</div>
<div class="rightcol">
<p>Do you believe in SEO?</p>
</div>
<div class="leftcol">
<strong>A</strong>
</div>
<div class="rightcol">
<p>Yes I do</p>
<p>SEO is a very powerful technique to increase your site ranking in Google.</p>
<p>Also it just cool and so and so</p>
</div>
</div>
CSS:
strong {
font-size: 50px;
}
.wrapper {
width:100%;
}
.leftcol {
width:10%;
display:inline-block;
}
.rightcol {
width:80%;
vertical-align:top;
display:inline-block;
}
I put a container. check this fiddle for live demo. http://jsfiddle.net/KdPfz/1/
.container
{
width: 100%;
height: 60px;
}
.letter
{
font-size: 50px;
float: left;
}
.sentence
{
width: 350px;
margin-top: 20px;
margin-left: 20px;
font-size: 20px;
float: left;
z-index: 5;
}
Like this?
<html>
<head>
<style type="text/css">
.qa b {
font-size: 50px;
}
.qa .answer_box {
margin-left: 90px;
display: inline;
}
.qa p {
font-size: 25px;
display: block;
}
.answer_box p {
margin-left: 50px;
}
</style>
</head><body>
<div class="qa">
<div class="question">
<b>Q</b>
<p style="display: inline-block;">
Do you believe in SEO?
</p>
</div>
<div class="answer">
<b>A</b>
<div class="answer_box">
<p style="display: inline-block;">
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
If you inject a display: inline-block; style into your first p tag, leave the rest to the p tags natural block format, and a conditional margin for the answer block.
This may be more what you are looking for - a fiddle - I re-wrote your html to avoid using styling elements
<div class="qa">
<div class="question">
<div class="bold-letters">Q</div>
<div class="questions">
<p>Do you believe in SEO?</p>
</div>
</div>
<div class="answer">
<div class="answer_box">
<div class="bold-letters">A</div>
<div class="answers">
<p>
Yes I Do
</p>
<p>
SEO is a very powerful technique to increase your site ranking in Google.
</p>
<p>
Also it just cool and so so so.
</p>
</div>
</div>
</div>
and some short css
.bold-letters, .answers, .questions{
display:inline-block;
}
.bold-letters{
font-size:50px;
vertical-align:top;
margin-right: 30px;
}
.questions{
vertical-align:bottom;
}
I was writing this while the other answers popped up
http://jsfiddle.net/tprats108/ugaYM/
css:
.qa {
font-size: 25px;
}
.qa .heading {
font-weight: bold;
font-size: 50px;
float: left;
}
.qa .response {
float: left;
margin-left: 20px;
}
.clear {
clear: both;
}
html:
<div class="qa">
<div class="question">
<div class="heading">Q</div>
<div class="response">
<p>Do you believe in SEO?</p>
</div>
</div>
<div class="clear"></div>
<div class="answer">
<div class="heading">A</div>
<div class="response">
<p>Yes I Do</p>
<p>SEO is a very powerful technique to increase your site ranking in Google.</p>
<p>Also it just cool and so so so.</p>
</div>
</div>
</div>
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;
}
as per screenshot attached:
I want to create a <div> that is positioned "x" pixels from the top, but essentially "expands" vertically to fit whatever is in a given tab as well as horizontally the width of the whole page with a solid colour. Essentially a <div> that ignores the other <div>'s. Screenshot explains what I mean better. How do I make such a <div> layout?
A sticky footer looks to me what you are looking for. This means you have a content area that is either the entire screen or if it has more contents, fits the content. The footer is either on the bottom of the screen or on the bottom of the content
http://www.cssstickyfooter.com/
or search for stickyfooter on Stack Overflow
And abit of html to get you started
http://jsbin.com/emufot/8/
Standard CSS should do the job for you as if you don't set a height for a div, it will automatically expand to fit its content. Here is some code I knocked up quickly which will display the idea:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href=".css"/>
<style>
body {
margin: 0 auto;
padding: 0;
}
p {
margin: 0 auto;
padding: 0;
}
.topstuff {
height: 200px;
background-color: #333333;
margin: 0 auto;
padding: 0;
}
.contentContainer {
width: 100%;
background-color: #ff0000;
margin: 0 auto;
padding: 0;
}
.content {
width: 1000px;
margin: 0 auto;
padding: 0;
}
.footer {
height: 200px;
background-color: #00ff00;
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body>
<div class="topstuff"></div>
<div class="contentContainer">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent semper placerat ligula volutpat aliquam. Maecenas vulputate, nibh at iaculis placerat, ligula nisl sodales odio, quis adipiscing purus dolor venenatis nunc. Proin vehicula rhoncus eros tristique aliquet. Vivamus faucibus hendrerit orci eget egestas. Nulla commodo lectus vitae nunc condimentum pharetra. Donec mattis nulla orci. Proin tortor nulla, varius at mollis ac, vestibulum vel leo. Cras ut rutrum sem. Sed vulputate nisi sed leo aliquam ac fermentum tellus porta. Phasellus quis purus et purus sollicitudin tristique a quis sem. Nunc malesuada, eros ac venenatis consequat, erat elit viverra sem, vitae commodo justo orci nec neque. Proin sed aliquam tellus. In tincidunt urna sit amet felis lobortis fringilla elementum massa egestas.</p>
</div>
</div>
<div class="footer"></div>
</body>
</html>
Just replace the 'lorerm ipsum etc' content with whatever you want to see the containing div change size.
Good Luck.