CODEWITHSUNDEEP
htmlcssforms
Miles Works
Miles Works

Reputation: 639

CSS - DIV alignment issues

I am having a tiny little problem with the CSS below.

While the boxes all line up, I'm trying to get the text to appear inside the boxes, and then to stylize the text...everything I've tried seems to fail. Something is overriding it or the browser is just ignoring it.

Further still is that the text "Foundation 100 - Presence" always outstrips its intended area. This text is dynamic and will change constantly. So the size of this block will change based on the number of characters in the block. So this value in the CSS -> width:489px; will change accordingly.

Furthermore, each one of those blocks has contain an HTML Form link. ...

A few restrictions no javascript, no java, and no php. straight HTML and CSS.

Anyone want to take a crack at this one ????

The Code on the page:

#video_line {
  width: 489px;
  text-align: center;
}
#vl_desc {
  float: left;
  width: 200px;
  height: 30px;
  background: #ffffff;
}
#vl_rental {
  float: left;
  width: 62px;
  height: 20px;
  background: #ff0000;
}
#vl_sales {
  display: inline-block;
  margin: 0 auto;
  width: 62px;
  height: 20px;
  background: #00ff00;
}
#vl_view {
  float: right;
  width: 62px;
  height: 20px;
  background: #0000ff;
}
#vl_text_desc {
  text-align: right;
  font-size: 19 px;
  font-weight: 300;
}
<div id="video_line">
  <div id="vl_desc">
    <p id="vl_text_desc">Foundation 100 - Presence</p>
  </div>
  <div id="vl_rental">TEXT</div>
  <div id="vl_sales">TEXT</div>
  <div id="vl_view">TEXT</div>
</div>

This is what I am looking for ->

what I am looking for

Upvotes: 1

Views: 55

Answers (2)

super11
super11

Reputation: 476

Simply change following styles:

#vl_text_desc {
    margin-top: 0;
}
#video_line {
    width: 489px;
    text-align: center;
    display: inline;
}
#vl_view {
    float: left;
}
#vl_desc {
    float: left;
    width: 200px;
    height: 30px;
    background: #ffffff;
    margin-right: 16px;
    margin-top: 0;
}

From here you can modify font-family and color as you prefer.

Upvotes: 0

Asons
Asons

Reputation: 87191

Here is a start

#video_line {
  width:489px;
  text-align:center;
}

#vl_desc {
  float:left;
  width:250px;
  height: 30px;
  background: #ffffff;
  font-size: 18px;
  font-family: arial;
  font-weight: bold;
  padding: 3px 6px;
}

#vl_rental {
  float:left;
  width:62px;
  height: 20px;
  background: #ff0000;
  color: white;
  font-size: 18px;
  font-family: arial;
  font-weight: bold;
  padding: 3px 6px;
}

#vl_sales {
  float:left;
  width:62px;
  height: 20px;
  background: #00ff00;
  color: darkgreen;
  font-size: 18px;
  font-family: arial;
  font-weight: bold;
  padding: 3px 6px;
}

#vl_view {
  float:left;
  width:62px;
  height: 20px;
  background: #0000ff;
  color: yellow;
  font-size: 18px;
  font-family: arial;
  font-weight: bold;
  padding: 3px 6px;
}

#vl_text_desc {
  text-align: right;
  font-size: 19 px;
  font-weight: 300;
}
<div id="video_line">
  <div id="vl_desc"><span id="vl_text_desc">Foundation 100 - Presence</span></div>
  <form id="vl_rental">TEXT</form>
  <form id="vl_sales">TEXT</form>
  <form id="vl_view">TEXT</form>
</div>

Upvotes: 1

Related Questions