This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 8 years ago.
I have been trying to make two divs float side by side or basically the shopping cart and the items (namely jcart and cartbox) but cant seem to get it. Here is the demo: link
i tried change float:right; on the cartbox css but that would only move the shopping cart to the right and if I remove the float on the cartbox css.. The cart and the items align side by side but for some reason cart appears to be really small and the "add to cart" button doesn't appear to click. Any help will be appreciated!
HTML:
<form method="post" action="" class="jcart">
<fieldset>
// item details here
</fieldset>
</form>
<div class='cartbox'>
<div id="jcart"><?php $jcart->display_cart();?></div>
<div id='jcart-loader'><img src='img/ajax-loader.gif' alt=''></div>
</div>
CSS:
#jcart {
position:relative;
font-size:1.15em;
top:0;
margin:0 0 .75em;
}
.jcart {
width:135px;
margin:0 20px 20px 0;
padding-top:20px;
border:solid 2px #E5E5E5;
float:left;
background:#F0F0F0;
text-align:center;
}
.cartbox {
float:left;
position:relative;
top:0;
width:500px;
margin:0;
padding:0;
}
You need to add display: inline-block on the elements you wish to align side by side, as div elements have a default style of display: block, meaning they will stack vertically instead of horizontally (not the behaviour you want).
From the looks of it; the shopping cart box is too wide to fit side by side in the content container as well. Make the div with the id centre wider (possibly to 1000px instead of 960px), and coupled with the addition of changing the display property, that should do it.
In terms of the code you need to write directly in order to get this to change, do the following:
#centre {
width: 1000px;
}
.cartbox {
display: inline-block;
}
EDIT: I modified these changes to your website locally and it appears to have worked.
add float:left to your css code in #jcart:
#jcart {
position:relative;
float:left
font-size:1.15em;
top:0;
margin:0 0 .75em;
}
You can use display property to inline or inline-block as #Sam Holmes said
or you can do something using float. like this:
.cartbox div{
float:left;
}
or
.cartbox div{
display:inline;// or display:inline-block;
}
here is the Demo
It is because you don't have enough space in the parent Divs.
I tried to set it to 10px and it allinged fine.
Related
I divided my page in sections, one of the sections contains a h2-Tag (the title of the section) and a div (that contains a p-Tag).
I want the text to be perfectly centered inside the section, because of that, I've used flex to center the element.
Now I need the title to be aligned on the left side (see image for better explanation).
https://ibb.co/b5DSpT
If I add it to the div affected by the flex-property the styling is completely wrong. If I remove it from the div, the text isn't perfectly centered anymore, because the h2-tag occupies a small amount of the section.
Any ideas how to solve this problem?
Thanks,
Mike
You don't need to use flex. Check the code below.
.wrapper{
padding:25px;
background:#d0e1d9;
}
.title{
color:#000;
font-size:20px;
margin:0 0 25px 0;
}
.section{
padding:50px 25px;
text-align:center;
font-weight:bold;
font-size:20px;
background:#e5e5e5;
}
<div class="wrapper">
<div class="title">Uber uns</div>
<div class="section">This is the Div with the Text</div>
</div>
Does anyone know why the float:left isn't working? Basically, I have a div with class=boxscore_first, which is in the correct position. Then I have two more divs with class=boxscore which are appearing on top of the first. I want them to appear in sequence to the right of the first one. I want them to all float next to each other..
HTML
<div id="menu">
<div id="scoreboard"></div>
<div class="boxscore_first"></div>
<div class="boxscore"></div>
<div class="boxscore"></div>
</div>
CSS
.boxscore_first {
width:60px;
height:60px;
background-color:red;
margin-top:-60px;
margin-left:13px;
float:left;
}
.boxscore {
width:60px;
height:60px;
background-color:blue;
float:left;
margin-top:-60px;
margin-left:13px;
}
Actually, according to HTML you provided, you have three boxes. Left one and right one are .boxscore_first and the middle one is .boxscore.
Another and more relevant thing is that the .boxscore_first is a div. That means it's a block element. It doesn't float. In other words it wants to be alone in the line. You have to make both .boxscore_first and .boxscore float: left.
I'm trying to centre align an image using a div and a CSS class (the tag is wrapped in a div class="center" tag). What I'm using at the moment is working in Dreamweaver (when I go to design view) but not when I load the page up in Safari. Here is my code:
.center {
display:inline;
text-align:center;
-webkit-inline;
-webkit-center;
background-color:transparent;
}
Sorry for asking such a simple question, I'm completely new to HTML, my experience is in Objective-C.
text-align: center caused the content to be centered (within the container), and not the container itself being centered.
Since you use display: inline, the size of the container will be the same as its content, and the centering will not have the effect you're after.
Either, you use the margin: 0 auto to center the container (towards its parent container), OR you change display: inline to display: block.
Give text-align:center; to it's .center parent DIV. Write like this:
HTML
<div class="parent">
<div class="center"></div>
</div>
CSS
.parent{
text-align:center;
}
.center {
display:inline;
background-color:transparent;
}
You can use margin : 0 auto , to a vertical align , but if you want a vertical-horizontal align , you need a code like this:
.center{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-200px;
position:absolute;
top :50%;
left:50%;
}
margin: 0 auto. Is what you're looking for. You'll need a width also.
div.center { margin:0 auto; width: 20%;background:orange;}
I know there must be a simple way to do this but for the life of me I can't figure it out.
I have a three column layout with a fluid center column and what I need to do is to take 3 images and distribute them evenly across the center div - such that the center image is always in the center of the center column (i.e. the center of the page) and the left image is justified left and the right image justified right.
the page uses a stripped down version of the faux absolute positioning demo as a framework, and there is no problem implementing that - but what I need is a self-contained way to arrange these three objects within the center div (column).
I have tried putting them in an Unorded List but when I float the elements to the left - well then they are floated to the left and no longer centered in the div.
I also tried doing it without the ul but have so far been unsuccessful.
any help here would be appreciated.
Let's say this is your markup:
<div class="wrapper">
<img class="first">
<img class="second">
<img class="third">
</div>
There are many ways to accomplish this, here is one way using known widths of the images:
img {
width:100px;
display:block;
}
.first {
float:left;
}
.second {
float:right;
}
.third {
margin:0 auto;
}
Demo: http://jsfiddle.net/wY6AS/
Here's another way with absolute positioning, and known widths:
.wrapper {
padding:10px;
position:relative;
}
img {
width:100px;
height:100px;
display:block;
}
.first {
position:absolute;
top:10px;
left:10px;
}
.third{
position:absolute;
top:10px;
right:10px;
}
.second {
margin:0 auto;
}
Demo: http://jsfiddle.net/wY6AS/1/
I wish I could make more demos and give better explanations, but I've got to run. Known widths makes it easy, but it is still not all that difficult with unknown widths, using display:inline-block and text-align:center on the parent element in combination with floats or absolute positioning, for example.
I don't want to suggest tables, but that's an option too if you are really desperate and can't get another method to work. Check out the CSS display properties that emulate table behavior as well.
http://jsfiddle.net/PZ5AZ/
Please advise me what to do to make text Send Vertical align middle .also please advise that these problems not came in future what can i do ?
As has been previously said vertical alignment is not really supported on anything that isn't a table cell.
But if you are just trying to center a single line of text you could use line-height. If you set the line-height to the same as the height of the element and remove any padding then the text will display in the middle of the element, just as if it is vertically aligned.
So on your example the following would work (if you remove the default styles first):
line-height:28px;
height:28px;
padding:0px;
But if the text wraps to more than one line this solution won't work, the text will suddenly become very spaced.
For a more general solution it is best to use javascript to dynamically work out the padding required for the particular element.
You can't vertically align text outside of tables so there are two options:
You play with the padding of the parent element to achieve the illusion of v-aligned text. As illustrated by Mr Long.
or
You make the parent element position:relative; and the child element absolute:
<div id='container'>
<div id='txt'>My Text</div>
</div>
#container{
position:relative;
}
#txt{
position:absolute; left:0px; top:50%;
margin-top:10px; /* half the height of the text element */
}
/* hint: for scaling attributes use %'s */
I think the first option is the simplest in your case.
Good luck Bro!
W.
if you like to center the text inside the div vertically and perhaps horizontally you can try this
#container{
position:relative;
width:200px;
height:300px;
border:1px solid #CCCCCC;
}
#txt{
position:absolute;
width:150px;
height:50px;
top:50%; left:50%;
margin-top:-25px; /* 1/2 of height */
margin-left:-75px;/* 1/2 of width */
border:1px solid #FF0000;
}
<div id="container">
<div id="txt">My Text</div>
</div>
Try this: padding: 0px 0px 4px 0px;
Add this to clear default button padding in Mozilla:
button::-moz-focus-inner {
border:0;
padding-top:0;
}