cosmichero 2025 cosmichero 2025 - 5 months ago 9
HTML Question

Need help positioning these divs...

I'm making a "get a link from the site box" but I can't seem to position these divs correctly. For the most part they are correct but I would like the title dead in the center, the "get a link" button to line up with the search box and for the search box to be more to the right. I've been fiddling with these for about 45 minutes and researching positioning on w3 but I just can't get it. Any pointers will be helpful.

Heres the jsfiddle

https://jsfiddle.net/j6pf08kn/1/

HTML

<body>
<div id="top_con">
<div id="title_con">
<a href="swfs/welcomeflash.swf" id="downLink" download="welcomeflash">
<header id="title">
Diff Lirl
</header>
</a>
</div>
<div id="share_con">
<button id="share">Get a link!</button>
<textarea id="link"></textarea>
</div>
</div>
</body>


CSS

html {
height: 100%;
}

body {
background-color: black;
height: 100%;
margin: 0;
padding: 0;
}

header {
margin: 0 auto;
}

#top_con {
width: 100%;
display: inline-block;
}

#share_con {
float: right;
width: 40%;
display: inline-block;
}

#link {
width: 50%;
resize: none;
margin-top: 3%;
}

#share {}

#title_con {
width: 57%;
float: center;
display: inline-block;
}

#title {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 48px;
text-align: right;
color: white;
cursor: pointer;
}

a {
text-decoration: none;
color: white;
}

Answer

http://codepen.io/anon/pen/WxGepy

So I've done a few things. Listing them out now:

  • I threw in another wrapper.
  • I took the liberty of replacing your IDs with classes
  • I have commented code in there to show you box-shadows. I like them instead of borders because of box-sizing and the effects borders have on the box model.
  • I changed the colors because my eyes hurt.
  • I took advantage of several properties here, most notably float:left;, text-align:center;, and display:inline-block;
  • Note: This does have a rather ugly breakdown when the screen sizes get much smaller. Responsiveness was not in the initial question or scope.

html {
  height: 100%;
  width: 100%;
}

body {
  background-color: #ccc;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

* {
  box-shadow: 0 0 15px 1px rgba(255, 0, 0, 0.4) inset, 0 0 0 1px rgba(0, 0, 255, 0.5);
}

.top_con {
  text-align: center;
}

.inner_con {
  display: inline-block;
}

.share_con {
  padding: 1em;
  display: inline-block;
}

.share_con,
.title_con {
  float: left;
  position: relative;
}

.title {
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 48px;
  color: white;
  cursor: pointer;
  margin: 0 1em;
}

.hide_my_ass {
  visibility: hidden;
}

.share {
  vertical-align: middle;
}

.link {
  vertical-align: middle;
}

<body>
  <div class="top_con">
    <div class="inner_con">
      <div class="share_con hide_my_ass">
        <button class="share">Get a link!</button>
        <textarea class="link"></textarea>
      </div>
      <div class="title_con">
        <a href="#" class="downLink">
          <header class="title">
            Diff Lirl
          </header>
        </a>

      </div>
      <div class="share_con">
        <button class="share">Get a link!</button>
        <textarea class="link"></textarea>
      </div>
    </div>
  </div>
</body>