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;
}
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
Even though I used float, my two div classes do not want to align side-by-side. How to do it?
Basically the entire width is 520px and each box is 250px in width with a margin between the boxes of 20px.
<div id="car-box">
<div class="well-car">
<div class="add_box">
<h1 class="add_heading">car model</h1>
</div>
</div>
<div class="car-brand">
<a class="button" href="www.placehold.it">car brand</a>
</div>
</div>
And CSS:
.car-box {
width:520px;
height:500px;
border:5px dashed blue;
margin-right:10px;
float:left
}
.well-car {
width:250px;
height:250px;
border:10px solid red;
}
.car-brand {
width: 250px;
height:250px;
border:10px dashed blue;
font-size: 20px;
float:left
}
Here Fiddle...Fiddle
Your border width gets added to the content widths. 250+2*10 + 250+2*10 == 540.
(You can read here https://developer.mozilla.org/en/docs/Web/CSS/box-sizing how do browsers calculate block elements' sizes)
For your custom styles it's usually best to set box-sizing: border-box(http://www.paulirish.com/2012/box-sizing-border-box-ftw/)
Edit: and yes, also float:left on the .well-car class, as others pointed out.
You need to float .well-car as well:
http://jsfiddle.net/b3kd9mwf/26/
You just need to add float: left; to your div with the class "well-car".
.well-car {
width:250px;
height:250px;
border:10px solid red;
float: left;
}
You are not floating your elements correctly. Class wellcar should be floated to the left and class car-brand should be floated to the right. The following code should work.
#car-box {
width:520px;
height:500px;
border:5px dashed blue;
margin-right:10px;
}
.well-car {
width:250px;
height:250px;
border:10px solid red;
float: left;
}
.car-brand {
width: 250px;
height:250px;
border:10px dashed blue;
font-size: 20px;
float:right;
}
I want my blockquotes aligned, not overlapping. The issue can be seen here: http://ymirsgirlfriend.tumblr.com/post/86505956778/caramelcheese-carry-on-my-wayward-butt
Example Image of requirement.
Here is my CSS:
blockquote {
display: block;
width:200px;
margin-left:20px;
margin-right:10px;
border:1px solid #bbb4b4;
padding: 5px 5px 5px 5px;
border-radius:0px;
color:#aaaaaa;
background-color: #fafaf7;
width:180px;
margin-left:0px;
cursor:url(http://img69.imageshack.us/img69/7673/cursorw.png);
}
Thank you to anyone who looks at the question!
Avoid width and set a negative margin-right. Keep the padding and don't use overflow:hidden, otherwise the content will get cut or too close to the border.
blockquote {
/* width: 200px; no width!*/
margin-right: -6px; /*this is the code*/
}
A JSfiddle would be useful but
#stuff > blockquote {
overflow:hidden;
}
seems to do the trick.
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
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.