Here is an SSCCE to show my problem:
<html>
<head>
<title>SSCCE for problem</title>
<style type="text/css">
h1 {font-size: 2em;}
h5 {font-size: 1.3em; margin: 1em;}
</style>
</head>
<body style="text-align: center;">
<div style="background-color: #C0C0C0;">
<div style="background-color: #B0B0B0; float:left; padding: 1em;"><h1 style="">Welcome to<br/><img src="http://www.oddllama.cu.cc/logo.png" alt="OddLlama Productions"
title="Welcome to OddLlama Productions!"/></h1>This is some sample text.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in est non dui dictum eleifend. Proin tempor sodales odio, vitae laoreet orci vehicula blandit.
Curabitur vitae tellus odio, nec vehicula leo. Nam ac urna nisi, eget molestie dui.</div>
</div><br/>
<span style="width: 25%; float: left; clear: left; background-color: #D0D0D0"><p>
<h5>SOMETHING</h5>Stuff.<br/>Stuff.<br/>Stuff.<br/>Stuff.<br/>Stuff.<br/>
</span>
<span style="width: 50%; float: left; background-color: #DDDDDD">
<h1>SSCCE</h1>
<p>This is an SSCCE.</p>
<p>Lorem ipsum dolor sit amet,<br/>consectetur adipiscing elit.<br/>Praesent in est<br/>non dui dictum eleifend.<br/>Proin tempor<br/>sodales odio,<br/>vitae
laoreet orci<br/>vehicula blandit.<br/>Curabitur vitae<br/>tellus odio,<br/>nec vehicula leo.<br/>okay good enough.</p>
</span>
<span style="width: 25%; float: left; background-color: D0D0D0"><p>
<h5>More stuff!</h5>
<p>I'll just put a bunch of line breaks to take up space<br/><br/><br/><br/><br/><br/><br/><br/>okay good</p>
</span>
<p style="clear: both;"><br/>THIS IS A THING AT THE BOTTOM it is a footer yay footers are footery and footeriness is footy okay why am I typing this this is awkward but
I must take up more space spaciness is spacey<br/><br/>okay good</p>
<br/><div style="padding: 10px;"></div><hr/><div style="padding: 10px;"></div>
</body>
</html>
And here is an image of how it renders:
How can I make the circled div that contains the text expand down so it is the same height as the one with the image? I placed them both in a common parent div, but no matter what attributes or styles I tried to use, it wouldn't expand down.
Is there an expand: down CSS thing, or some alternative that I can use to make my text expand downwards?
Unfortunately, there is no there is no expand:down attribute in CSS :)
But you do have some alternatives. The most common solution for this is by using the .clearfix method.
When you float some children elements, the parent (container) doesn't take in effect the height of those floated children. That's where you need to add the clearfix class.
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
here's a fiddle
PS: it's compatible in very old IE versions too!
Related
I am making a full section page website like this. Each page is its own <section> tag. Currently my page has 4 sections (presented with different background colors).
My first section has a container div and inside two new divs (one for an image and the other for a description). Now when the window is minimized, the contents of the description spills over and goes over to the second page instead of being contained in the first page. To illustrate:
Please let me know what changes to make. I've been working on this issue for a long time and I have yet to find a resource or solution that works for my code..
My HTML code:
<!-- FIRST PAGE -->
<section>
<div class="content" id="about">
<!-- Picture -->
<div id="aboutImage">
<img src="img/about.jpeg">
</div>
<!-- Description -->
<div id = "aboutInfo">
<h2>Lorem Ipsum.</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus.
Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus.
Cras ipsum <br> neque, finibus id mattis vehicula, rhoncus in mauris.
In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor
maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien
a ex porta dictum.
</p>
</div>
</div>
</section>
<!-- SECOND PAGE-->
<section id="skills"></section>
My CSS:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width: 100%;}
* {box-sizing: border-box;}
html, body {
height:100%;
position: relative;
}
section{
width: 100%;
height:100vh;
}
.content{
display: table-cell;
height: 100vh;
}
/* ABOUT */
#about {
border-bottom: #F1C40F 5px solid;
display: flex;
justify-content: space-evenly;
align-items: center;
}
#aboutImage {
padding: 30px 30px 30px 30px;
}
#aboutInfo {
border-style: dashed;
border-width: 2px;
border-color: black;
font-size: 30px;
text-align: left;
}
#aboutInfo p {
font-size: 15px;
}
/* SECOND PAGE*/
#skills {
background-color: #E3E7D3;
}
/* RESPONSIVE DESIGN */
#media screen and (max-width: 768px){
#about {
flex-direction: column; /* added */
}
}
Please please let me know how to fix this. I've been having so much trouble.
Add
overflow: scroll;
to CSS of #aboutInfo div. What this will do is that whenever there's overflow of content, instead of going to the next page, that div will scroll the content.
Test it here codepen
Additionally, i also added margin-bottom: 20px; to CSS of #aboutInfo div just so you can see that this div doesn't overflows to next page anymore.
I have chat window where I want to put photo and message next to photo. Conversation window must be responsive and message div auto-adjustable to the screen. But I can't find any way to do this, because once message has few lines of text, it drops to the next line.
If I use table, I can't make fixed-width photo TD. If I use DIVS, I can't do auto-width message DIV :)
Here is JSFiddle with an example:
https://jsfiddle.net/s95tdcLw/3/
HTML:
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit
</div>
</div>
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis.
</div>
</div>
<div class="receiver">
<div class="receiverPhoto"></div>
<div class="receiverMessage">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et mauris eget est maximus condimentum nec a turpis. Nulla nulla est, feugiat vitae posuere et, efficitur ac justo. Suspendisse pulvinar, urna quis vehicula malesuada, lorem lacus luctus odio,
eu mattis nisi turpis vel lectus.
</div>
</div>
CSS:
.receiver {
clear: both;
padding-top: 1rem;
}
.receiverPhoto {
float: left;
width: 40px;
height: 40px;
background: blue;
border-radius: 20px;
}
.receiverMessage {
float: left;
width: auto;
background: rgb(230, 230, 230);
border-radius: 10px;
margin-left: 0.5rem;
padding: 10px;
}
Leave the float settings, use these instead:
.receiver {
position: relative;
}
.receiverPhoto {
position: absolute;
left: 0;
}
.receiverMessage {
margin-left: 45px;
}
jsFiddle
Your .receiverMessage element should not float and it should reserve left-margin space for the .receiverPhoto element.
.receiverMessage {
/* should not float */
width: auto;
background: rgb(230, 230, 230);
border-radius: 10px;
margin-left: 50px; /* reserve space of .receiverPhoto width */
padding: 10px;
}
See the forked Fiddle: https://jsfiddle.net/092b077c/
In response to your comment how to make it work for the opposite...
I'd use the classes on the wrapping div elements to determine the message type. In my example I introduce a new class .sender. Now I create four selectors that determine whether the photo element floats left or right and whether the message element has left or right padding:
New CSS:
.sender .receiverPhoto {
float: right;
}
.sender .receiverMessage {
margin-right: 50px;
}
.receiver .receiverPhoto {
float: left;
}
.receiver .receiverMessage {
margin-left: 50px;
}
HTML:
<div class="sender">
<div class="receiverPhoto"></div>
<div class="receiverMessage">...</div>
</div>
Now the .receiverPhoto and .receiverMessage styles do not need to declare margin or float.
See the updated Fiddle: https://jsfiddle.net/092b077c/1/
I have two p tags
<p style="margin: 0; display: inline;">content1</p>
<p style="margin: 0; display: inline;" align="right">content2</p>
The Output is content1content2. My expectation is like this:
content1 content2
Can anyone help. I want one "content1" in the left p and "content2" in the right 'p'.
You can use CSS flexbox for this. Below is the minimal CSS for the requested layout:
<div style="display: flex; justify-content: space-between;">
<p style="background-color: papayawhip;">Lorem ipsum dolor sit amet.</p>
<p style="background-color: palegoldenrod;">Donec eget luctus lacus.</p>
</div>
For longer content, you can use fixed-width columns:
<div style="display: flex; justify-content: space-between;">
<p style="flex-basis: 49.5%; background-color: papayawhip;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget luctus lacus. Cras consectetur elementum mi sed consequat.</p>
<p style="flex-basis: 49.5%; background-color: palegoldenrod;">Pellentesque aliquet condimentum augue in mattis. Praesent sagittis nisl magna, a volutpat arcu imperdiet vel. Quisque et orci sed ligula cursus luctus.</p>
<!-- 49.5% + 49.5% = 99%, remaining 1% is distributed according to justify-content -->
</div>
You could do it with floats:
<p style="margin:0;display:inline;float:left">content1</p>
<p style="margin:0;display:inline:float:right" >content2</p>
The idea of the tag <p></p> is to display a paragraph. So HTML offers you the <div></div> which is a container conecpt. So you should use Salman A's Solution, because there aren't just different tags in html for no reason. Actually you can style a paragraph with css so it is getting displayed the same as a div container, but it is not meant to be like that.
I don't want to say to you, what you have to do. I just wanna help you using the "correct" tags for the things they were made for.
What you really want is something that doesn't assume sufficent width to fit both paragraphs into one line:
* { box-sizing: border-box; }
.two { width: 30em; max-width: 100%; }
.two p { display: inline-block; max-width: 50%; }
.two p:nth-child(1) { float:left; }
.two p:nth-child(2) { float:right; }
<div class="two">
<p>This is the first paragraph of two.</p>
<p>This is the second paragraph of two.</p>
</div>
Here's another quick turnaround to achieve this:
p{
text-align: center;
}
.item p{
display: inline-block;
}
.leftContent{
text-align: left;
width: 50%;
}
.rightContent{
text-align: right;
width: 50%
}
<br>
<!--Use both P tags in the same line without space -->
<article class="item">
<p class="leftContent">Content1</p><p class="rightContent">Content2</p>
</article>
float:left, float:right.... or
width:49.9%;
display:inline;
text-align:left;
text-align:right;
In my fiddle you will see a break in text, I would like to put a <hr> there and decorate it in the CSS, but I have no idea how to do this as when I do this it breaks my inline-block, and I'm thinking that's because the <hr> is a block element. Is there any creative solutions around this? I need it to be fixed there between the two paragraphs of text to maintain responsiveness.
Thanks!
FIDDLE
HTML:
<section>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum, nisl id ultricies sollicitudin, neque sapien porta nisl, ut gravida elit quam id nisi. <br /><br />Nunc viverra laoreet porttitor. Duis augue justo, pellentesque a luctus eget, luctus a quam. Fusce nec neque nec dolor mattis tempor id vitae nisi.</p>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg">
</div>
</section>
CSS:
.first {
height: 100%;
line-height: 0;
}
.first p {
vertical-align: middle;
display: inline-block;
width: 49%;
}
.ipad {
vertical-align: middle;
display: inline-block;
width: 49.2%;
}
p {
margin: 0;
padding: 1em 0;
font-size: 1.8em;
line-height: 1.5;
}
You could achieve this by wrapping your <p> and <hr> elements into another <div> element, and making it display:inline-block. My solution involved adding this wrapper so your structure ended up being:
<section>
<div class="first">
<div class="text-wrap">
<p></p>
<hr />
<p></p>
</div>
<img class="ipad" src="http://img1.lesnumeriques.com/news/26/26963/ipad-4-os.jpg" />
</div>
</section>
(Additional element is .text-wrap. Note that I split up the two paragraphs into individual <p> elements.) The CSS I left mostly alone, except I removed the definition for .first p, and added these two:
.text-wrap{
vertical-align: middle;
display:inline-block;
width:49%;
}
.text-wrap p {
vertical-align: middle;
display: inline-block;
}
Here's a JSFiddle example that shows what this achieves. If this isn't what you were looking for, or you wanted to use a different method, let me know and I'll be happy to help further!
Here's an alternative to Serlite's answer. It basically puts the <hr> in implicitly, using CSS.
fiddle
We add a border to the top of each paragraph, except the first one in each container.
p {
...
border-top: 1px solid black;
}
p:nth-child(1) {
border-top: none;
}
I'm trying to align a <div> with a <h2> inside it at the bottom of a parent div. The best way to show you is through code so here's the JSFiddle example: http://jsfiddle.net/3GGa7/
As you can see, the project-title div (and the <h2> inside it) is aligned to the top of the project-header div. I would like it to sink to the bottom of that div, to look like this:
However if I apply a margin-top to project-title it pushes everything down rather than just that div, and if I apply a padding the black background will cover the image.
What's the most elegant way to accomplish this?
Since the .project-title must be contained within the .project-header, give the .project-header a position:relative; and the .project-title a position:absolute;
.project-header {
height: 100px;
position:relative;;
}
.project-title {
background: black;
opacity: 0.75;
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
Check it out http://jsfiddle.net/gXyEU/
This way, whether you use a bigger image, or change its position or margin, you'll never have to worry about the title, it will always be positioned where it should be.
If your picture size is steady. You can try the css below:
.project {
width: 335px;
float: left;
border: 1px solid #ccc;
border-radius: 6px;
}
.project-header {
height: 100px;
}
.project-title {
background: black;
opacity: 0.75;
float:left;
width:100%;
margin-top:25%;
}
.project-title h2 {
color: #fff;
margin-bottom:0px;
float:left;
}
just close your project-header div before start of project-title div like as
<div class="project">
<div class="project-header" style="background-image:url('http://placekitten.com/200/300');" ></div>
<div class="project-title">
<h2>Project title</h2>
</div>
<div class="project-description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare felis id enim dignissim dapibus. Maecenas dui mi, ullamcorper eget semper non, varius quis orci. Suspendisse lobortis nibh sed nisi luctus dictum. Sed vel arcu eros. Etiam id varius neque. Cras ac sapien in est fringilla tempor vitae et est.</p>
</div>
</div>
FIDDLE is here
If you don't mind setting the width of .project-header
.project-header {
width: 335px;
height: 100px;
display: table-cell;
vertical-align: bottom;
}
Modified JSFiddle