Problem aligning items using CSS and HTML

user_13315426 0
Viewed 96

I have a basic question, but not basic for me. I am facing an issue to align div and removing some extra spacing. I have attached to screen shots. One shows how design looks right now and another shows to remove the extra space that is marked in red box and also to align right most div to the bottom and top of the left div.

Or if some one can explain what is the best way to achieve this

Any help is highly appreciated.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <div class="mainContainer">
        <div class="topSection pd-10">
            <div class="pd-10">
                <div class="topBar">
                    <input type="text" value="36 pt">
                    <input type="text" value="Auto">
                    <div class="box">
                        <div class="leftAlign"></div>
                    </div>
                    <div class="box">
                        <div class="centerAlign"></div>
                    </div>
                    <div class="box">
                        <div class="rightAlign"></div>
                    </div>
                    <div>
                        <div class="circle"></div>
                    </div>
                </div>
                <div>
                    <textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
                </div>
            </div>
            <div>
                <div class="flexContainer">
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                    <div class="iconBox mg-5 ">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                </div>
                <div class="flexContainer">
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="mg-10 box">
                    <div class="logoUp"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoLeft"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoRight"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoDown"></div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body {
    background-color: #262626;
    color: #c7c7c7;
    font-family: lucidagrande;
    /* font-size: 11px; */
    font-weight: 400;
}

input[type=text] {
    background-color: #262626;
    border-color: #525252;
    color: #c7c7c7;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    width: 10%;
    text-align: center;
}

textarea {
    background-color: #262626;
    border-color: #525252;
    color: #c7c7c7;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    /* width: 95%; */
}


/* .topSection {
    padding: 10px;
} */

.topSection>div,
.leftSection {
    display: inline-block;
    background-color: #323232;
}

.flexContainer {
    display: flex;
    flex-wrap: nowrap;
    margin: 10px;
}

.box {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    width: 16px;
    text-align: center;
    border-style: solid;
    border-width: 2px;
}

.topBar {
    margin-bottom: 15px;
    margin-top: 5px;
}

.topBar>div {
    display: inline-block;
    vertical-align: bottom;
}

.leftAlign {
    background: url(../images/leftAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.centerAlign {
    background: url(../images/centerAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.rightAlign {
    background: url(../images/rightAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.circle {
    border: solid 2px #525252;
    background-color: black;
    border-radius: 50px;
    height: 25px;
    width: 25px;
}

.plus {
    background: url(../images/plus.png) no-repeat center center;
    background-size: auto;
    height: 100%;
}

.iconBox {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    width: 50px;
    height: 50px;
    border-style: solid;
    border-width: 2px
}

.iconBox>div {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    border-style: dotted;
    height: 65%;
}

.logoUp {
    background: url(../images/logoUp.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoLeft {
    background: url(../images/logoLeft.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoRight {
    background: url(../images/logoRight.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoDown {
    background: url(../images/logoCenter.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.mg-5 {
    margin: 5px;
}

.pd-10 {
    padding: 10px;
}

.pd-5 {
    padding: 5px;
}

.pd-b-5 {
    padding-bottom: 5px;
}

.mg-10 {
    margin: 10px;
}

Attached required designed. I don't need a code but approach to start this design in a best way. An explanation will be helpful.

[![enter image description here][3]][3]

css html jquery javascript
3 Answers

sorry if it's a quick solution but it fix the problem of the space between the two elements. it's the simplest solution I didn't touch any of your elements. i just add this properties to the pd10 class. check code : *you can delete the margin if you want but I add it for style reasons:

body {
    background-color: #262626;
    color: #c7c7c7;
    font-family: lucidagrande;
    /* font-size: 11px; */
    font-weight: 400;
}

input[type=text] {
    background-color: #262626;
    border-color: #525252;
    color: #c7c7c7;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    width: 10%;
    text-align: center;
}

textarea {
    background-color: #262626;
    border-color: #525252;
    color: #c7c7c7;
    border-style: solid;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    width: 95%; 
 }


/* .topSection {
    padding: 10px;
} */

.topSection>div,
.leftSection {
    display: inline-block;
    background-color: #323232;
}

.flexContainer {
    display: flex;
    flex-wrap: nowrap;
    margin: 10px;
}

.box {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    width: 16px;
    text-align: center;
    border-style: solid;
    border-width: 2px;
}

.topBar {
    margin-bottom: 15px;
    margin-top: 5px;
}

.topBar>div {
    display: inline-block;
    vertical-align: bottom;
}

.leftAlign {
    background: url(../images/leftAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.centerAlign {
    background: url(../images/centerAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.rightAlign {
    background: url(../images/rightAlign.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.circle {
    border: solid 2px #525252;
    background-color: black;
    border-radius: 50px;
    height: 25px;
    width: 25px;
}

.plus {
    background: url(../images/plus.png) no-repeat center center;
    background-size: auto;
    height: 100%;
}

.iconBox {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    width: 50px;
    height: 50px;
    border-style: solid;
    border-width: 2px
}

.iconBox>div {
    background-color: #262626;
    border-color: #525252;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
    border-style: dotted;
    height: 65%;
}

.logoUp {
    background: url(../images/logoUp.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoLeft {
    background: url(../images/logoLeft.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoRight {
    background: url(../images/logoRight.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.logoDown {
    background: url(../images/logoCenter.png) no-repeat center center;
    background-size: contain;
    height: 14px;
    width: 14px;
}

.mg-5 {
    margin: 5px;
}

.pd-10 {
    padding: 10px;
    display:flex;
    text-align-last: justify;
    margin:10px;
}

.pd-5 {
    padding: 5px;
}

.pd-b-5 {
    padding-bottom: 5px;
}

.mg-10 {
    margin: 10px;
}
   
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <div class="mainContainer">
        <div class="topSection pd-10">
            <div class="pd-10">
                <div class="topBar">
                    <input type="text" value="36 pt">
                    <input type="text" value="Auto">
                    <div class="box">
                        <div class="leftAlign"></div>
                    </div>
                    <div class="box">
                        <div class="centerAlign"></div>
                    </div>
                    <div class="box">
                        <div class="rightAlign"></div>
                    </div>
                    <div>
                        <div class="circle"></div>
                    </div>
                </div>
                <div>
                    <textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
                </div>
            </div>
            <div>
                <div class="flexContainer">
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                    <div class="iconBox mg-5 ">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                </div>
                <div class="flexContainer">
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                    <div class="iconBox mg-5">
                        <div>
                            <div class="plus"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="mg-10 box">
                    <div class="logoUp"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoLeft"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoRight"></div>
                </div>
                <div class="mg-10 box">
                    <div class="logoDown"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

user_154871840

I refactored a few classes. You can check working example here: https://jsfiddle.net/1924ovfp/78/.

And here is the snippet:

body {
  background-color: #262626;
  color: #c7c7c7;
  font-family: lucidagrande;
  /* font-size: 11px; */
  font-weight: 400;
}

input[type=text] {
  background-color: #262626;
  border-color: #525252;
  color: #c7c7c7;
  border-style: solid;
  border-radius: 5px;
  padding: 5px;
  width: 10%;
  text-align: center;
}

textarea {
  background-color: #262626;
  border-color: #525252;
  color: #c7c7c7;
  border-style: solid;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  /* width: 95%; */
}


/* .topSection {
    padding: 10px;
} */

.flexContainer {
  display: flex;
  flex-wrap: nowrap;
  margin: 10px;
}

.box {
  background-color: #262626;
  border-color: #525252;
  border-radius: 5px;
  padding: 5px;
  width: 16px;
  text-align: center;
  border-style: solid;
  border-width: 2px;
}

.topBar {
  margin-bottom: 15px;
  margin-top: 5px;
  width: 100%;
}

.bottomBar{
 width: 100%; 
 padding-right:15px;
}

.bottomBar textarea{
   width: 98%; 
}

.topBar>div {
  display: inline-block;
  vertical-align: bottom;
}

.leftAlign {
  background: url(../images/leftAlign.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.centerAlign {
  background: url(../images/centerAlign.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.rightAlign {
  background: url(../images/rightAlign.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.circle {
  border: solid 2px #525252;
  background-color: black;
  border-radius: 50px;
  height: 25px;
  width: 25px;
}

.plus {
  background: url(../images/plus.png) no-repeat center center;
  background-size: auto;
  height: 100%;
}

.iconBox {
  background-color: #262626;
  border-color: #525252;
  border-radius: 5px;
  padding: 5px;
  width: 50px;
  height: 50px;
  border-style: solid;
  border-width: 2px
}

.iconBox>div {
  background-color: #262626;
  border-color: #525252;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  border-style: dotted;
  height: 65%;
}

.logoUp {
  background: url(../images/logoUp.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.logoLeft {
  background: url(../images/logoLeft.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.logoRight {
  background: url(../images/logoRight.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.logoDown {
  background: url(../images/logoCenter.png) no-repeat center center;
  background-size: contain;
  height: 14px;
  width: 14px;
}

.mg-5 {
  margin: 5px;
}

.pd-10 {
  padding: 10px;
}

.pd-5 {
  padding: 5px;
}

.pd-b-5 {
  padding-bottom: 5px;
}

.mg-10 {
  margin: 10px;
}

.mainContainer {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap:5px;
}

.mainContainer>div {
  display: inline-block;
  background-color: #323232;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/style.css">
  </head>

  <body>
    <div class="mainContainer">
      <div class="pd-10 container_1">
        <div class="topBar">
          <input type="text" value="36 pt">
          <input type="text" value="Auto">
          <div class="box">
            <div class="leftAlign"></div>
          </div>
          <div class="box">
            <div class="centerAlign"></div>
          </div>
          <div class="box">
            <div class="rightAlign"></div>
          </div>
          <div>
            <div class="circle"></div>
          </div>
        </div>
        <div class="bottomBar">
          <textarea name="" id="" cols="30" rows="6" placeholder="Type logo text here"></textarea>
        </div>
      </div>
      <div class="container_2">
        <div class="flexContainer">
          <div class="iconBox mg-5">
            <div>
              <div class="plus"></div>
            </div>
          </div>
          <div class="iconBox mg-5 ">
            <div>
              <div class="plus"></div>
            </div>
          </div>
        </div>
        <div class="flexContainer">
          <div class="iconBox mg-5">
            <div>
              <div class="plus"></div>
            </div>
          </div>
          <div class="iconBox mg-5">
            <div>
              <div class="plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="container_3">
        <div class="mg-10 box">
          <div class="logoUp"></div>
        </div>
        <div class="mg-10 box">
          <div class="logoLeft"></div>
        </div>
        <div class="mg-10 box">
          <div class="logoRight"></div>
        </div>
        <div class="mg-10 box">
          <div class="logoDown"></div>
        </div>
      </div>
    </div>
  </body>

user_143898300

In your CSS file, add width to 40%. I think it will correct your problem.

.pd-10 {

    padding: 10px;
    width: 40%;
}
user_158925400
Related