What would be the best way to do the following "speech bubbles" in html/css?
Thanks!
Here is a JSFiddle with what you want
http://jsfiddle.net/CDksf/4/
CSS:
.bubble_wrap {
overflow: auto;
width: 520px;
margin-bottom: 10px;
float: left;
}
.bubble_wrap .bubble_image {
float: left;
width: 100px;
height: 100px;
background-color: red;
margin-right: 20px;
}
.bubble_wrap .bubble_content {
width: 400px;
height: 100px;
background-color: blue;
float: right
}
.bubble_wrap.bubble_right {
float: right;
}
.bubble_wrap.bubble_right .bubble_image {
float: right;
margin-right: 0px;
margin-left: 20px;
}
.bubble_wrap.bubble_right .bubble_content {
float: left;
}
HTML:
<div class="bubble_wrap">
<div class="bubble_image"></div>
<div class="bubble_content"></div>
</div>
<div class="bubble_wrap bubble_right">
<div class="bubble_image"></div>
<div class="bubble_content"></div>
</div>
<div class="bubble_wrap">
<div class="bubble_image"></div>
<div class="bubble_content"></div>
</div>
Related
I need little help for my CSS.
I am trying to make a comment system but it has something went wrong.
This is my DEMO page from codepen.io
You can see there is a user avatar and textarea. The container max-width:650px; when you reduced width the browser the it is automatically changing.
anyone can help me in this regard?
HTML
<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>
CSS
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: left;
width:100%;
height: auto;
background-color: red;
}
.textinput {
float:left;
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}
I want to make it like this:
You could try using calc(); to perform the calculation for you... baring in mind you would need to add the vendor prefixes to this.
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: right;
width: calc(100% - 45px);
height: auto;
background-color: red;
}
.textinput {
float:left;
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}
<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>
as an option instead of float use display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: #00f;
height: auto;
display: table;
width: 100%;
padding: 5px;
}
.commenter,
.comment-text-area{
display: table-cell;
vertical-align: top;
}
.commenter{
width: 35px;
padding-right: 5px;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
width:100%;
height: 100%;
/*background-color: red;*/
}
.textinput {
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}
<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>
For scenarios like this I combine float:left;and float:none; The avatar wrapper div gets the float:left; and the comment wrapper div gets the float:none;.
The trick here is to put padding-left on the float:none; div equal to the width of the float:left; div.
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
width:35px;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: none;
height: auto;
background-color: red;
padding-left:35px;
}
Here is a working demo
See this fiddle
I have changed your CSS a little bit. See the changes below. The problem with your CSS was that you used no width for .commenter. Thus it took default 100% width.
CSS
.commenter {
float: left;
width: 6%;
}
.comment-text-area {
float: left;
width: 94%;
height: auto;
background-color: red;
}
EDIT
use width for .commenter as width: 35px;..I chose 35px because it is the width of the avatar image.
only change .comment-text-area height:94%
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: left;
width: 94%;
height: auto;
background-color: red;
}
.textinput {
float:left;
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}
<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>
you can give the class name form-control to the <textarea> like this:
<textarea class="form-control" rows="3" cols="90" ></textarea>
Reference: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
How do I align div to the bottom of another div in HTML?
And why it doesn't work?
HTML:
<div id="big">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
CSS:
#big {
background-color: red;
margin: 10px;
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
display: inline-block;
position: absolute;
bottom: 0px;
margin: 10px;
display: inline-block;
}
Your question is unclear but do you mean like this?..
#big {
display:table-cell;
position:relative;
vertical-align:bottom;
background-color: red; margin: 10px; width: 800px; height: 300px;
}
.small {
display: inline-block;
width: 150px; height: 150px; background-color: blue;
margin: 10px;
}
<div id="big">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
This will work:
http://jsfiddle.net/4f4ejwr0/5/
#big {
background-color: red;
margin: 10px;
position: relative;
height: 300px;
}
#bottom {
position: absolute;
bottom: 0px;
margin: 10px;
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
margin-left: 10px;
}
<div id="big">
<div id="bottom">
<div class="small">1</div>
<div class="small">2</div>
<div class="small">3</div>
</div>
</div>
is this what youre looking for? http://jsfiddle.net/swm53ran/94/
should be changed to
position: relative;
Add the following to your CSS Class:
bottom:0 !important;
and remove the position portion.
Try this
#big {
background-color: red;
margin: 10px;
width: 150px; //new line
}
.small {
width: 150px;
height: 150px;
background-color: blue;
float: left;
position: relative; // new line
margin: 10px;
}
Live jsfiddle
Update: This is ok ? Jsfiddle
I've got a problem with DIV-containers.
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
</div>
</div>
The inner-teaser should have the height from the teaser-image (250px) + 20px padding. But inner-teaser has only a height of 40px (2 * 20px padding).
Add overflow: hidden to .inner-teaser to force it to take its floating-children height:
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
overflow: hidden;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
</div>
</div>
You can also use { display: inline-block } for .inner-teaser div.
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
display: inline-block;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
</div>
</div>
just add after class class="teaser-text" see demo :demo
.inner-teaser {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
.bg-blue {
background: blue;
}
.teaser-image {
background-position: center;
background-size: 350px;
width: 250px;
height: 250px;
border-radius: 150px;
}
.image-left {
float: left;
margin-right: 50px;
}
<div class="outer-teaser bg-blue">
<div class="inner-teaser">
<div class="teaser-image image-left" style="background-image: url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg);">Image</div>
<div class="teaser-text">Lorem ipsum dolor...</div>
<div style="clear:both"></div>
</div>
</div>
v style="clear:both">
How to create this html layout using div tags? I'm trying this code. But it is not working. How should i position my leftbottom div? What is wrong on my code? Please help me......... Hurry..... thanks
<html>
<head>
<style>
.container{
margin-left: auto;margin-right: auto;
width: 1000px;
}
.leftupper{
width: 350px;
height: 241px;
background: red;
float: left;
clear: right;
}
.gallery{
width: 630px;
height: 600px;
background: red;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.leftbottom{
width: 350px;
height: 200px;
float: left;
background-color: red
}
</style>
</head>
<body>
<div class="container">
<div class="leftupper">
</div>
<div class="gallery"></div>
<div class="leftbottom"></div>
</div>
</body>
</html>
Try to change
.gallery{
width: 630px;
height: 600px;
background: red;
float: left;
margin-left: 10px;
margin-right: 10px;
}
To
.gallery{
width: 630px;
height: 600px;
background: red;
float: right;
margin-left: 10px;
margin-right: 10px;
}
http://jsfiddle.net/tuekdzph/1/
You should use coloumns like this:
<style>
.container{
margin-left: auto;margin-right: auto;
width: 1000px;
overflow: auto; /* clear floats */
}
.left { float: left; width: 350px; }
.right { float: left; width: 630px; }
.left-upper{
width: 100%;
height: 241px;
background: red;
}
.gallery{
width: 100%;
height: 600px;
background: red;
}
.left-bottom{
height: 200px;
background-color: red
}
</style>
Your HTML should look like this:
<div class="container">
<div class="left">
<div class="left-upper"></div>
<div class="left-bottom"></div>
</div>
<div class="right">
<div class="gallery"></div>
</div>
</div>
I get that there are many questions and answers regarding laying out a page using DIV's and CSS but none are helping me get close to the layout I am looking for.
I am trying to stop my habit of laying out a page using tables (its rare I do page layout and old habits die hard).
The layout I am looking for (on a black page) is:
I want this to remain in the centre of the page if the screen displays anything more than 800px wide
The HTML I have so far is:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="outerleftcolumn">Left Column</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="outerrightcolumn">Left Column</div>
<div id="footer">Footer</div>
</form>
</body>
The CSS I have so far:
body {
margin: 0px;
padding: 0px;
background-color:black;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#outerleftcolumn {
background-image:url(/Templates/Red/Images/LeftBoarder.jpg);
float: left;
width: 15px;
height: 700px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
}
#content {
background: #ff6a00;
float: left;
width: 635px;
height: 700px;
}
#footer {
background: #df781c;
clear: both;
width: 800px;
}
I keep reading an article or post and think I know what I have to do only to change one setting and the whole thing goes loopy laa laa. I could achieve this using tables in a heartbeat but as I say I am trying (and failing) to drop my bad habits. The images in the two outside div are just jpg's with gradients.
Any pointer would be appreciated.
body {
margin: 0px;
padding: 0px;
background-color:#000;
}
#outerleftcolumn {
float: left;
width: 15px;
height: 700px;
background-color: red;
}
#outerrightcolumn
{
background-image: url(/Templates/Red/Images/RightBoarder.jpg);
float: right;
width: 15px;
height: 700px;
background-color: red;
}
#centercolumn{
overflow: hidden;
}
form{
display: block;
margin: auto;
width: 800px;
background-color: #000;
}
#header {
background: #438a48;
width: 770px;
height:50px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 620px;
}
#content {
background: #fff;
float: left;
width: 620px;
height: 620px;
}
#anotherheader{
float: left;
width: 100%;
height: 50px;
background-color: yellow;
}
#footer {
background: #df781c;
height: 30px;
width: 800px;
float: left;
}
<body>
<form id="form1" runat="server">
<div id="outerleftcolumn">Left Column</div>
<div id="outerrightcolumn">Left Column</div>
<div id="centercolumn">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">
<div id="anotherheader">
</div>
</div>
<div id="footer">Footer</div>
</div>
</form>
</body>
I tweak a little bit your code, getting rid of the outter columns:
HTML:
<body>
<form id="form1" runat="server">
<div id="header">Header</div>
<div id="leftcolumn">Left Column</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</form>
</body>
CSS:
body {
margin: 0px;
padding: 0px;
background-color:red;
width: 800px;
}
#header {
background: #438a48;
width: 770px;
height:50px;
margin: 0px 15px;
}
#leftcolumn {
background: #2675a8;
float: left;
width: 150px;
height: 700px;
margin-left: 15px;
}
#content {
background: #ff6a00;
float: left;
width: 620px;
height: 700px;
margin-right: 15px;
}
#footer {
background: lightblue;
clear: both;
width: 770px;
margin: 0px 15px;
}
Here is a fiddle: http://jsfiddle.net/v81wdmgp/