3

I want div "1" to the center and div "2" to the right. what can i do? I have this html

<div class="header">
  <div class="1"></div>
  <div class="2"></div>
</div>

and this css

.1 {
display:inline-block; 
width:200px; 
height:120px;}
.2 {
display:inline-block; 
width:250px; 
height:120px;
float:right;}
Kenny Amaro
  • 473
  • 1
  • 3
  • 14
  • Looking at the website you have linked to in comments below, your HTML is broken in places. For example you have `` tags with no co-responding opening tags. Run your page through an HTML validator and fix the obvious errors. Better still get rid of tables for lay out purposes. – Jon P Aug 11 '15 at 04:09
  • Man I know that issues but I need to fix the header one – Kenny Amaro Aug 11 '15 at 04:12
  • 1
    Broken HTML **may** be your issue. When you have random unmatched tags, the results may will be random. With valid, or at least, not broken, HTML, the answer from @index should work for you. – Jon P Aug 11 '15 at 04:16

4 Answers4

2

First I know it's just sample but don't use number for first character for classes (Which characters are valid in CSS class names/selectors?).

And this is what I usually use to do that 

<div id="block">
    <div id="right">Right</div>
    <div id="middle">Middle</div>
</div>

#middle {
    background-color: #494949;
    width: 200px;
    height: 120px;
    margin: 0 auto;
}

#right {
    background-color: #949494;
    width: 250px;
    height: 120px;
    float: right;
}

http://jsfiddle.net/index/npq5puc1/.

Community
  • 1
  • 1
index
  • 3,697
  • 7
  • 36
  • 55
1

Try this

1.) Change HTML element according to CSS to get desire result

.div1 {
display:inline-block; 
width:200px; 
height:120px;
  background:red;
  float:right;

}
.div2 {
display:inline-block; 
width:250px; 
height:120px;
float:right;
  background:blue;
}
<div class="header">
  <div class="div2">div 2 in right</div>
  <div class="div1">div 1 in center</div>
</div>
Kishan
  • 1,182
  • 12
  • 26
0

try it like this;

html

<div class="header">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

css

.div1 
{
    display:block;
    background:#333;
    width:200px; 
    height:120px;
    margin:auto;
}
.div2 
{
    display:block; 
    background:red;
    width:250px; 
    height:120px;
    float:right;
}

Here's the Fiddle link.

Laky
  • 632
  • 3
  • 10
  • it doesn't work yet :S I don't know why – Kenny Amaro Aug 11 '15 at 03:47
  • Yeah, I can't see anything wrong but the fiddle doesn't work. (Display on one line, that is) – DylanB Aug 11 '15 at 03:49
  • @DylanB you mean even in fiddle it shows up in one line? – Laky Aug 11 '15 at 03:51
  • The website I'm working is http://www.gioccocraft.com/index.php tell me about it – Kenny Amaro Aug 11 '15 at 03:57
  • The fiddle puts the divs on separate lines. @kennyamaro that website has a few issues which I'm sure you'll fix but for the love of good UX please get a smaller image of Pear Earrings, that's a 2mb file and watching it load is painful. – DylanB Aug 11 '15 at 04:06
  • this errors are things I have to fix but I'm talking about the header and how to align those elements – Kenny Amaro Aug 11 '15 at 04:08
0

Try this HTML:

<div class="header">
  <div class="1"></div>
  <div class="2"></div>
</div>

CSS:

[class='1'] {
display:inline-block; 
width:200px; 
height:120px;}
[class='2'] {
display:inline-block; 
width:250px; 
height:120px;
float:right;}
Fliko Genso
  • 35
  • 1
  • 11