I have a small image and i have to show some text beside that image. for that i have used the below html and css.
<div class="main">
<img alt="image"/>
<h2>this is heading text. This is heading text. This is heading text</h2>
</div>
.main{
border:1px solid black;
height:200px;
width:400px;
padding:20px;
}
h2{
display:inline;
}
it is showing like this
The second line is wrapping below the image. I have to get the second line just below the first line not below the image.
I tried using float also. but not working. please help.
I created a fiddle so you can edit it easily: http://jsfiddle.net/codingsolver/MtqHh/1/
You could simply float the image, and push the h2 across with a left margin.
http://jsfiddle.net/MtqHh/8/
img { float: left; }
h2{ margin: 0 0 0 50px; }
hope it will help you
.main{
border:1px solid black;
height:200px;
width:400px;
padding:20px;
}
h2{
display: flex;
}
img{
float:left;
margin-right:10px;
}
Working demo http://jsfiddle.net/MtqHh/13/
.main{
border:1px solid black;
height:200px;
width:400px;
padding:20px;
display: inline-flex;
}
.main img{
float: left;
width: 50px;
height: 50px;
}
h2{
float:left;
margin-left: 50px;
text-align: left;
display: inline-block;
padding;0px;
margin:0px;
}
use this code usefull for you. and see this link http://jsfiddle.net/bipin_kumar/MtqHh/10/
A good way of achieving this is shown on an updated fiddle:
http://jsfiddle.net/y5ewr/1/
The advantage is highlighted in the use of overflow:hidden on the <h2>. This means that if the <img> is not in place the heading will flow full width and no margins are needed on the heading element.
Related
So I want my boxes to stay the same position even when I shrink my window.
But for now when I shrink them, they will resize and push the floating box to the bottom space and not making a line together.
.bodybox1
{
border:1px solid black;
width:45%;
background:white;
margin:1% auto 2% auto;
text-align:center;
font-size:2em;
padding:3%;
overflow:hidden;
}
.boxcoverblack
{
text-align:center;
width:120px;
padding:7%;
border:1px solid black;
margin-top:2%;
}
.signuparea
{
width:30%;
float:right;
border:1px solid black;
text-align:center;
padding:3%;
overflow:hidden
}
.signuptext
{
text-align:center;
width:180px;
padding:7%;
word-spacing:15px;
border:1px black solid;
line-height:35px;
}
.freeshipping
{
float:left; /*image*/
}
<div class="bodybox1">
<img class="freeshipping" src="https://via.placeholder.com/500x300" width="500" height="300" >
<div class="signuparea">
<div class="signuptext">Sign up to get freeshipping coupon code! ( per phone number )
</div>
<div class="boxcoverblack">Sign up</div>
</div>
</div>
help me please....
http://jsfiddle.net/abxf6c9h/
.bodybox1 {
display:flex;
justify-content:center;
border: 1px solid black;
width: 100%;
background: white;
margin: 1% auto 2% auto;
text-align: center;
font-size: 2em;
padding: 3%;
overflow: hidden;
}
Try this. I guess you want this box displayed as flexed. Tell me if that gave you a hint . I just added:
display:flex;
justify-content:center;
See my fiddle:
http://jsfiddle.net/abxf6c9h/1/
You need to use flexbox and a bit of arrangements :
use
display:inline-block
instead of
float:left
use vertical-align:top to remove the auto centering align from the wraping div
and finaly
display:flex;
flex-wrap:nowrap;
to the parent of the 2 involved divs
Here's the result
fiddle
I am trying to position text using div, but its not working well!
.background
{
background-image:url(bg.png);
width:600px;
height:500px;
margin-top:0px;
margin-left:0px;
}
.head1{
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
margin-top:100px;
margin-left:100px;
}
.background is the background image of the div whereas .head1 is a text within .background div.
You can see it in the html part!
<div class="background">
<div class="head1">There are 3 CRUCIAL things that you need to remember...</div>
<div class="points">
</div>
</div>
The text of class head1 are displayed at positions as they are defined! but it also bring the the background image with it!
It seems quiet confusing so I took a screenshot! please check it out!
Maybe my css is poorly coded. please help me out.
Add overflow: auto to parent div.
.background {
background: red;
width:600px;
height:500px;
overflow: auto;
}
.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
margin-top:100px;
margin-left:100px;
}
http://jsfiddle.net/L7q5g6yu/2/
Zero margins on .background can be removed, zero margin is default value for divs.
OR
you can remove the inner div, see this code, it makes the same if you need the inner div just to align the text.
<div class="background">
There are 3 CRUCIAL things that you need to remember...
</div>
<style>
.background {
background: green;
width:500px;
height:400px;
overflow: auto;
padding: 100px 0 0 100px;
color:#d45151;
font-style: italic;
}
</style>
http://jsfiddle.net/L7q5g6yu/3/
Use the following style
.head1 {
font-size:18px;
font-family:calibri;
font-style:italic;
color:#d45151;
padding: 100px 0 0 100px;
}
So I'm just a begginer to this HTML and CSS stuff, and I tried to make my own webpage. The thing is, it looks like this:
While I would like to get the second div(#diary) centered, but I can't do it without screwing up the whole webpage. Which will be the correct code?
This is what I have:
HTML:
<div id="progress">
Blablabla
</div>
<div id="diary">
blablabla
</div>
CSS:
div {
border: 7px solid #142538;
background-color: #c7d0e1;
}
#diary {
margin:auto;
width:30em;
display:inline-block;
}
#progress {
font-size:16px;
width:auto;
float:left;
display:inline-block;
margin-left:25px;
}
Thanks in advance ^^
You have mixed display: inline-block and float:left which makes no sense. Elements that float become display: block; by default. http://www.w3.org/TR/CSS2/visuren.html#float-position
There are two ways to solve your problem.
Way1 Go Inline-block all the way:
http://jsfiddle.net/fDx2U/
div {
border: 7px solid #142538;
background-color: #c7d0e1;
}
#diary {
margin:auto;
width:30em;
display:inline-block;
vertical-align: top;
}
#progress {
font-size:16px;
width:auto;
vertical-align: top;
display:inline-block;
margin-left:25px;
}
How to the rid of the margin between the items: How to remove the space between inline-block elements?
Vital for this solution is the vertical-align:top; (your initial problem)
Way2 Go floating all the way:
http://jsfiddle.net/fDx2U/1/
div {
border: 7px solid #142538;
background-color: #c7d0e1;
}
#diary {
margin-left: 100px;
}
#progress {
font-size:16px;
width:auto;
float:left;
margin-left:25px;
width: 100px;
}
Vital for this solution is that the width of .diary equals the margin-left of #progress
Try this
#diary {
margin:0 auto;
width:30em;
display:block;
}
I seem to have a difficulty in putting the button i made in the center of the screen. Here's the source code.
View Products
Here are the styles
/*header button styles*/
a.header-button {
display: inline-block;
background-color:#
}
a.header-button:hover {
color: #e8ddc8;
text-decoration: underline;
}
.header-button {
background-color:#031634;
color:#e8ddc8;
padding: 10px 5px 10px 5px;
border-radius: 5px;
text-align:center;
}
You see, even though I put text-align:center in the .header-button, the button does not position itself at the center. (See image below)
Can anyone help me?
Try this. Working Fiddle
a.header-button {
display: block;
background-color:#;
margin:0 auto;
width:100px;
}
One solution: http://jsfiddle.net/xzY5j/
css:
.header-button {
background-color:#031634;
color:#e8ddc8;
padding: 10px 5px 10px 5px;
border-radius: 5px;
}
.container {
text-align:center;
width: 100%;
padding: 50px;
background-color:#ccc;
}
}
HTML
<div class="container">
View Products
</div>
Other suggestion is:
Binita Tamang solution she wrote it before I had a chance so I will let her get the credit for it :)
You should give the container or the parent element text-align:center
jsfiddle
HTML
<div class="parent">
View Products
</div>
CSS:
.parent{
text-align:center;
}
If you want to put a button or any element on middle of the screen,then use position absolute an give the top 50% and left 50% now,give margin just half of its width and height in minus :
Something like this :
CSS
button{
position:absolute;
top:50%;
left:50%;
width:100px;
height:30px;
margin:-15px 0 0 -50px;
}
And if only middle from left then :
button{
position:absolute;
top:some_top_in_px;
left:50%;
width:100px;
height:30px;
margin:0px 0 0 -50px;
}
Fiddle DEMO
can someone please tell me what I am doing wrong here. I've tried to write the clear:both; also inside the floated elements but nothing seems to work.
I would like those small orange boxes inside the green border and not like this (see image).
Fiddle here and code:
<style type="text/css">
.wrap {
border:solid 2px green;
}
.wrap div {
margin: 0 0 0 10px;
padding: 10px;
text-align: center;
width: 67px;
float:left;
}
.wrap div span {
display:block;
background-color:orange;
margin:2px;
}
.clear {
clear:both;
}
</style>
<div class="wrap">
<div>
<span>xx</span>
<span>xx</span>
<span>xx</span>
</div>
<div>
<span>yy</span>
<span>yy</span>
<span>yy</span>
</div>
<div>
<span>zz</span>
<span>zz</span>
<span>zz</span>
</div>
<div class="clear"></div>
</div>
add
display: inline-block;
to your wrap container css
Fiddle: http://jsfiddle.net/Pv6m2/1/
Updated Fiddle
You're floating the <div class="clear">. That's why it does not work.
Try this selector for the floating divs instead so it does not match the clearing div:
.wrap div:not(.clear) {
margin: 0 0 0 10px;
padding: 10px;
text-align: center;
width: 67px;
float:left;
}
Another way of solving this, is to add float: none to your clearing class:
.clear {
clear: both;
float: none !important;
}
It is happening because .wrap does not have any height.
Add
overflow:hidden;
to .wrap. It will give height to it.
Updated fiddle here.
Add float:left; on the .wrap div
Demo
.wrap {
border:solid 2px green;
overflow:hidden;
}
This should be in your css.
Alternatively use
.wrap {
border: solid 2px green;
overflow: hidden;
}
and remove the <div class="clear"></div>
All of the other answers are perfectly fine too. Enjoy learning about floats!