CODEWITHSUNDEEP
htmlcss
idungotnosn
idungotnosn

Reputation: 2047

Align text to right of checkbox and center buttons

I want my HTML/CSS to match what it does in the following picture:

enter image description here

This is currently what my HTML/CSS looks like:

enter image description here

There are four things that I am having issues with in my HTML/CSS that the picture is currently doing:

  1. Align the text to the right of the checkbox in such a way that no text appears directly below the checkbox
  2. Make the two buttons in the picture the same size
  3. Make the two buttons centered according to the white text paragraph above
  4. I can't seem to do #2 and #3 at the same time.

Any other discrepancies between the two pictures can be ignored.

How do I accomplish items 1-4 as mentioned above?

This is the plunker link: http://plnkr.co/edit/dfZg2C1ZrqdeSdoBa21t?p=preview

This is the HTML code:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="LoadingDiv">
    <div class="LoadingText">
      <p style="color:red"><strong>Attention! You must agree to continue with Online Forms</strong></p>
      <p><input type="checkbox"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <div class="btn-group">
      <button class="btn btn-dont-allow">DON'T ALLOW</button>
      <button class="btn btn-consent-ok">OK</button>
      </div>
    </div>
  </div>
  </body>

</html>

This is the CSS:

#LoadingDiv .btn {
  min-width: 30%;
}


#LoadingDiv .btn-group {
  margin-left:35%;
  position: relative;
}


#LoadingDiv .LoadingText {
  position: relative;
  left: 25%;
  top: 25%;
  width: 50%;
  color: white;
}

#LoadingDiv .btn-dont-allow {
    background-color: #808083;
    color: #ffffff;
    padding: 3px 50px;
    font-size: 16px;
    margin-left: 3px;
    margin-right: 3px;
}

#LoadingDiv .btn-consent-ok {
    background-color: #1aa8de;
    color: #ffffff;
    padding: 3px 50px;
    font-size: 16px;
    margin-left: 3px;
    margin-right: 3px;
}

#LoadingDiv {
  margin: 0px 0px 0px 0px;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 9999;
  width: 100%;
  clear: none;
  background-color: rgba(68, 176, 129, 0.9);
}

P.S: The markup in this picture was not created using HTML/CSS, but a prototyping app, so I can't just extract it from its source.

Upvotes: 0

Views: 100

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28563

Jsfiddle

#LoadingDiv .btn {
  min-width: 30%;
}
#LoadingDiv .btn-group {
  display: inline-block;
}
#LoadingDiv .LoadingText {
  position: relative;
  left: 25%;
  top: 25%;
  width: 50%;
  color: white;
}
#LoadingDiv .btn-dont-allow {
  background-color: #808083;
  color: #ffffff;
  padding: 3px 50px;
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}
#LoadingDiv .btn-consent-ok {
  background-color: #1aa8de;
  color: #ffffff;
  padding: 3px 50px;
  font-size: 16px;
  margin-left: 3px;
  margin-right: 3px;
}
#LoadingDiv {
  margin: 0px 0px 0px 0px;
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 9999;
  width: 100%;
  clear: none;
  background-color: rgba(68, 176, 129, 0.9);
}
.check {
  width: 15px;
  height: 15px;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  position: relative;
  top: -3px;
}
.agree {
  display: inline-block;
  margin-left: 30px;
  margin-top: -22px;
  vertical-align: top;
}
<body>
  <div id="LoadingDiv">
    <div class="LoadingText">
      <p style="color:red"><strong>Attention! You must agree to continue with Online Forms</strong>
      </p>
      <input type="checkbox" class="check">
      <p class="agree">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <div class="btn-group">
        <button class="btn btn-dont-allow">DON'T ALLOW</button>
        <button class="btn btn-consent-ok">OK</button>
      </div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9439

See this fiddle https://jsfiddle.net/DIRTY_SMITH/avocyf33/7/

added this

p {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
}

and added min-width: 400px; to btn-group to keep buttons from wrapping.

Upvotes: 2

Related Questions