I'd like to have a two column list of items with square image and two lines of text next to it, nicely aligned
_________ ________
| | | | |
| | Line one h3 tag | | | Line one h3 tag
| | Line two p tag | | | Line two p tag
| | | | |
_________ | __________
Here's my code: http://jsfiddle.net/PEMKs/3/
HTML:
<div class="wrapper">
<div class="right clearfix">
<img src="http://placehold.it/100x100" >
<h4>My name is Markup.</h4><p>I live in Vienna</p>
</div>
<div class="left ">
<img src="http://placehold.it/100x100" >
<h4>My name is Markup.</h4> <p>I live in Vienna</p>
</div>
</div>
CSS:
.wrapper{
width:650px
}
.right{
width:300px;
height:100px;
position:relative;
float:right;
}
.right h4, .right p{
float:right;
margin-right:25px;
font-family:sans-serif;
}
.left{
width:300px;
height:100px;
position:relative;
margin-right:145px;
border-right:1px dashed #cccccc;
}
.left h4, .left p{
float:right;
margin-right:25px;
font-family:sans-serif;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
p{
display:inline-block;
}
How's this work for you?
http://jsfiddle.net/42XUW/
<div class="wrapper">
<div class="right clearfix">
<img src="http://placehold.it/100x100" style="float:left;" >
<h4>My name is Markup.</h4><p>I live in Vienna</p>
</div>
<div class="left ">
<img src="http://placehold.it/100x100" style="float:left;" >
<h4>My name is Markup.</h4> <p>I live in Vienna</p>
</div>
</div>
the style of the image will be set to float:left. It solves your problem.
You can add a CSS style to your image
.left img { float: right;}
Related
I would like to create two divs, one inside the other with equal padding on all sides of the child. Like so
<div>
<div>Foo</div>
</div>
So that the result looks like
----------------------------
| |
| |--------------------| |
| | | | <---- There is 1em padding on the inner
| | Foo | | container too
| | | |
| | | |
| |--------------------| |
| | <---- This is the window height,
---------------------------- the padding is 1em on all sides;
How do I do this in CSS?
Right now I am stuck on this layout, missing the bottom padding
With this code
<div class="more-padded full-height blue-green fixed">
<div class="more-padded full-height light-tan more-rounded light-border">Foo</div>
</div>
and style
.more-padded {
padding: 1em;
}
.full-height {
height: 100%;
}
.blue-green {
background-color: rgba(153, 204, 204, 1);
}
.light-tan {
background-color: rgba(239, 235, 214, 1);
}
.more-rounded {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
You can use box-sizing:border-box; so that the width and height properties include the padding and border
HTML
<div id="parent">
<div id="child">Foo</div>
</div>
CSS
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#parent {
box-sizing:border-box;
height:100%;
padding:1em;
background:hotpink;
}
#child {
height:100%;
background:dodgerblue;
}
Demo
Hi for equal padding use the following code.
Live demo is on http://jsfiddle.net/adarshkr/fqm83gms/5/
html
<div class="outer">
<div class="inner">
<p>Equal padding adarsh</p>
</div>
</div>
css
body{
background:#ddd
}
.outer{
background:#eee;
padding:20px
}
.inner{
background:#000;
padding:20px;
color:#fff
}
.inner a{
color:#fff;
text-decoration:none
}
Ok, now that I am on an actual computer:
I think you want this: (Js Fiddle For Reference)
body,html{
height:100%;width:100%;
}
body{
padding:1em;
}
body >div{
border:1px solid black;
}
Salaam,
I want to make an HTML layout like below:
+----------------------+-----+
| upSide | |
|----------------------| |
| |right|
| |side |
| | |
| mainSide | |
| | |
| | |
+----------------------+-----+
Some thing like this:
<div id="rightSide"></div>
<div id="mainFrame">
<div id="upside"></div>
<div id="mainSide"></div>
</div>
where I want to #upSide be over the #mainSide, in other word when you scrolling the #mainFrame, elements which in the #mainSide be visible at behind the #upSide, when the #upSide's background is transparent(e.g. background-color:rgba(0,0,0,0.35)).
Problem is when I set some things like below:
#upSide{
position:fixed;
width: 80%;
}
#rightSide{
width:20%;
float:right;
position:relative;
}
#mainFrame{
height:100%;
overflow:auto;
}
all things true, but the scrollbar(which in the #mainFrame) goes behind the #upSide.
What's your suggestion for this situation?
The scroll bar goes behind #upSide because of the position:fixed that you added.
Try something like this.
<html>
<head>
<style>
#upSide{
height:200px;
width: 80%;
background:blue;
}
#mainSide{
height:800px;
width: 80%;
background:green;
}
#rightSide{
width:20%;
height:800px;
float:right;
position:relative;
background:red;
}
#mainFrame{
height:800px;
width: 80%;
overflow:auto;
background:yellow;
}
</style>
</head>
<body>
<div id="rightSide"></div>
<div id="mainFrame">
<div id="upside"></div>
<div id="mainSide"></div>
</div>
</body>
I am trying to put 2 lines of text next to an image, sort of like this
_________
| | Line one of text
| image |
| | Line two of text
---------
This is the code that I have so far
<p style="color: #fff;"><img src="assets/image.png"><span style="">Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span></p>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
.banner img {
float: center;
margin: 5px;
}
.banner span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
.banner .ban2 span {
padding-top: 50px;
font-size: 17px;
vertical-align:top;
}
But currently it does this:
_________
| | Line one of text
| image |
| |
---------
Line two of text
I have looked all over the web but have not been able to figure out how to do this, any help would be very welcome.
There's no such thing as float: center; You can choose either left, right, or none.
http://jsfiddle.net/vd7X8/1/
If you float: left; on the image it will do what you're after.
If you want it centered, then you're going to have to wrap the image and the text in a container, fix the width of the container and do margin: 0 auto; on it, then continue to have your image floated--except it will be constrained by the wrapper.
Here is my demo which have using float and overflow with some explain
.div1 {
border: 3px solid #0f0;
overflow:auto; // without overflow here, if the "Line 1" and "Line 2" is short then "Next elements" will display below "Line 2" and the image will cover the "Next elements"
}
.img {
float: left;
width:100px;
height:100px;
background: #000
}
.div2 {
float: left; // without float here, if "Line 1" and "Line 2" is long -> text will display both at right and bottom the image
}
<div class="div1">
<img class="img"/>
<div class="div2">
<p> Line 1 </p>
<p> Line 2 </p>
</div>
</div>
<p>Next elements</p>
Hope it help
Here is a snippet using a svg so you can test it anywhere.
.img{
float: left;
margin-right:1rem;
}
<div>
<svg class="img" width="50" height="50" >
<rect width="50" height="50" style="fill:black;"/>
</svg>
<p>
Line 1
<br>
Line 2
</p>
</div>
I know this post is old but wrap your element in a div and apply the vertical-align:top to this div and you're done.
Check it. It is well defined css.
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<style>
.banner p {
font-family: "Gentium Basic";
font-size: 19px;
text-align: center;
color: #aaa;
margin-top: -10;
display: block;
}
img, span {
float:left;
}
.banner img {
float: center;
margin: 5px;
}
[class="ban1"]{
font-size: 17px;
position:relative;
top:50px;
left:11px;
}
[class="ban2"] {
font-size: 17px;
position: relative;
left: -97px;
top: 74px;
}
</style>
</head>
<body>
<div class="banner">
<div class="wrapper">
<p><img src="span.png"><span class="ban1">Line one of text</span>
<span class="ban2">Line 2 of text</span>
</p>
</div>
</div>
</body>
</html>
I know this is old post, but still wanted to say that not only float will do it, the <img> tag has a built-in attribute called align="left" which does that as well
<p>
<img src="smiley.gif" align="left"><span>Line one of text</span>
<br>
<span class="ban2">Line 2 of text</span>
</p>
Fiddle: http://jsfiddle.net/356akcoy/
I suggest using the old tables that works great. In terms of CSS it is just needed to add the vertical-align: top property.
<table>
<tbody>
<tr>
<td class="img-container">
<img src="https://img2.gratispng.com/20180324/sbe/kisspng-google-logo-g-suite-google-5ab6f1f0dbc9b7.1299911115219389289003.jpg"/>
</td>
<td class="content-container">
<span class="description">This is a very long text that creates multiple lines with the image at left side</span>
</td>
</tr>
</tbody>
</table>
Fiddle: https://jsfiddle.net/fypa0k4w/
I am new to css and trying to create a header for my webpage
The structure of the header is like
-LOGOIMAGE--link1--link2-----TITLEIMAGE(#center)-----link3--link4-
Here is the html of the header
<div id="header">
<img src="http://goo.gl/Uinfkp" class="logo"/>
<div id="navbox1">
aaa
bbb
</div>
<img src="http://goo.gl/Uinfkp" class="title"/>
<div id="navbox2">
xxx
yyy
</div>
</div>
And this is what i have tried with css http://jsfiddle.net/WSDJ3/
I have no idea why the images and text are placed like that. Please help!
To select a class you should use . not #
# is used to select an ID
So the CSS should look like this:
.logo
{
float:left;
width:72px;
height:70px;
margin:5px 0;
}
.title
{
float:left;
width:175px;
}
You are using classes and ids (which is good). Your CSS, however, is using the # selector for both.
# is for id (think of an ID number) and . is for classes. Change it to:
#header
{
width:100%;
height:80px;
background:#232c2b;
}
.logo
{
float:left;
width:72px;
height:70px;
margin:5px 0;
}
#navbox1
{
float:left;
margin:30px 30px;
}
.title
{
float:left;
width:175px;
}
#navbox2
{
float:left;
margin:30px 30px;
}
a
{
color:white;
font-size:15px;
text-decoration:none;
margin:auto 10px;
}
For this add just float left to the image. You can choose to give an inline css as I mentioned bellow or you can do internal css or call it with external css with the help of class.
<div id="header">
<img src="http://goo.gl/Uinfkp" class="logo" style="float:left;"/>
<div id="navbox1">
aaa
bbb
</div>
<img src="http://goo.gl/Uinfkp" class="title" style="float:left;"/>
<div id="navbox2">
xxx
yyy
</div>
Having problems displaying two images and one h1 tag on the same line. I want to align one image to the left and the last two elements on the right. Any tips on how to do that?
HTML
<div class="header">
<img src="meny_knapp2.png" class="meny" alt="meny link">
<img class="hioa" src="logo_hvit.png" alt="HiOA logo">
<h1 class="lsb"> Læringssenteret </h1>
</div>
CSS
.header {
height:120px;
width:100%;
background-color:#ff7f1f;
color:white;
font-size:20px;
display: table;
vertical-align:middle;
}
.meny {
height: 25px;
margin-left:0.5em;
line-height:120px;
}
.lsb {
font-size:24px;
letter-spacing:0.09em;
font-weight:lighter;
display:inline;
}
.hioa {
height: 60px;
float:right;
margin-right:1em;
}
.header * {
float: right;
}
.header img:first-child {
float: left;
}
.hioa {
height: 60px;
margin-right:1em;
}
please adjust css in class
<div class="header">
<div style="float:left;width:30%">
<img src="meny_knapp2.png" class="meny" alt="meny link" width="50"/>
</div>
<div style="float:right;width:70%">
<img class="hioa" src="logo_hvit.png" alt="HiOA logo" style="float:left;width:100px"/>
<h1 class="lsb" style="float:left;width:50%"> Læringssenteret </h1>
</div>
</div>