CODEWITHSUNDEEP
htmlcss
Sid
Sid

Reputation: 573

How to align buttons below and right-aligned to a HTML list?

I have constructed a small grid using an HTML <ul> list and I was planning to align buttons and text below it as I have drawn in the following figure:

How it should be

I wanted to have the buttons Select and Cancel below the grid and right-aligned along the right end of the box, while the text S-text would also be straight below but left-aligned (and Other just somewhere to the right, I can do that with absolute positioning). However, I just don't know how to do this using HTML/CSS; my attempts end up looking like this:

How it is now

Can anyone explain to me how this is done? This is a very simple example but I need to learn the principle at work here. My code is as follows:

example.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="simple_SE.css">
</head>
<body>

<table id="bigtable">

<tbody>

<ul id="blocks">
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
</ul>

<p id="stext">S-text</p>

<button id="selectbutton" type="button">Select</button>

<button id="otherbutton" type="button">Other</button>

<button id="cancelbutton" type="button">Cancel</button>

</tbody>

</table>

</body>
</html>

simple_SE.css:

#blocks { 
    list-style-type: none; 
    display: inline-block;
    float: left;
    margin: 0; 
    padding: 0; 
    width: 190px; 
}

#blocks li { 
    margin: 3px 3px 0px 0;
    padding: 1px;
    vertical-align: top;
    float: left;
    width: 30px;
    height: 30px;
    font-size: 4em;
    text-align: center; 
}

#selectbutton {
    float: left;
    position:static;
}

#cancelbutton {
    float: left;
    position:static;
}

#otherbutton {
    position: absolute;
    left: 250px;
    top: 100px;
}

Upvotes: 0

Views: 5683

Answers (4)

SRing
SRing

Reputation: 694

The key to understanding positioning is to imagine each object as a box, with each element fitting together like a puzzle. You do just that with your set of <li> statements. Just do that with the other elements.

Boxes

Most people do this using <div> tags instead of <table> tags. If I were re-writing your code I'd wrap the whole thing in a container and then arrange everything inside that container.

See this for more info on fluid layouts. As a lot of other answers have provided the code you need for a quick fix, I'll stick to a more general overview. Lets take the example above.

<div id="container">
    <div class="box"><!-- This is the yellow box --></div>
    <div class="box"><!-- This is the green box --></div>
    <div class="box"><!-- This is the purple box --></div>
    <div class="box"><!-- This is the red box --></div>
    <div class="box"><!-- This is the blue box --></div>
</div>

This code sets your structure. Then, in the CSS we can position our elements by setting a width and floating everything.

#container {
    width: 190px;
}
.box {
    float: left;
}

If you apply this to your code and add margin:10px; to both the #selectbutton and the #cancelbutton you'll have what you want.

Upvotes: 1

fcastillo
fcastillo

Reputation: 948

You don't need to use table. I think this would help you: fiddle

.pos {position: relative;}
.clear { clear: both; }
#stext { display: inline; float: left; margin: 10px 0 0}
#blocks { 
    list-style-type: none; 
    display: inline-block;
    float: left;
    margin: 0; 
    padding: 0; 
    width: 190px; 
}

#blocks li { 
    margin: 3px 3px 0px 0;
    padding: 1px;
    vertical-align: top;
    float: left;
    width: 30px;
    height: 30px;
    font-size: 4em;
    text-align: center; 
    background: red;
}

#selectbutton {
    float: left;
    position:static;
    margin-top: 10px;
}

#cancelbutton {
    float: left;
    position:static;
    margin-top: 10px;
}

#otherbutton {
    position: absolute;
    left: 250px;
    top: 100px;
}

And HTML:

<div class="pos">
<ul id="blocks">
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
<li class="ui-state-default"></li>
</ul>
    <div class="clear"></div>
<p id="stext">S-text</p>

<button id="selectbutton" type="button">Select</button>

<button id="otherbutton" type="button">Other</button>

<button id="cancelbutton" type="button">Cancel</button>
</div>

Upvotes: 1

PlantTheIdea
PlantTheIdea

Reputation: 16369

Welcome to HTML! Hopefully I can provide a little more current information than the layout book you are using from 1996 that advocated tables.

So apparently I can't put everything into this box, you can check out the jsFiddle I've attached to see the full layout. Here is the CSS:

* {
        box-sizing:border-box;
    }

    .container {
        display:inline-block;
        vertical-align:middle;
        width:185px;
    }

    .block-list {
        margin:0 auto;
        padding:0;
        list-style:none;
    }

    .block {
        display:inline-block;
        width:30px;
        height:30px;
        margin:3px 3px 0 0;
        background-color:grey;
    }

    .button-container {
        text-align:right;
    }

    .button-container:after {
        clear:both;
    }

    .button-container span {
        float:left;
    }

    .other-container {
        text-align:center;
    }

This is far from the best way to do it, and there are some improvements that can be made (like managing the 4px space added to the blocks that are display:inline-block, but this should give you what you're looking for (and not even using jQuery UI).

Here is a jsFiddle.

Upvotes: 2

Nielarshi
Nielarshi

Reputation: 1136

What you have to do is, wrap all buttons that you want to show below your "ul" in a div and wrap "ul" and "button div" in another div forming nested elements. This will ensure div containing buttons will be after your ul. Then you can style to place the child buttons wherever you want. And you dont need ant table element in this case.

Check this code.

HTML

<body>
     <div>
        <ul id="blocks">
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
           <li class="ui-state-default"></li>
        </ul>
        <div id="buttonDiv">
           <label id="stext">S-text</label>
           <button id="cancelbutton">cancel</button>
           <button id="selectbutton">Select</button>
        </div>
     </div>
     <button id="otherbutton">Other</button>
</body>

CSS 

#blocks { 
    list-style-type: none; 
    display: inline-block;
    margin: 0; 
    padding: 0; 
    width: 190px; 
}

#blocks li { 
    margin: 3px 3px 0px 0;
    padding: 1px;
    vertical-align: top;
    float: left;
    width: 30px;
    height: 30px;
    font-size: 4em;
    text-align: center; 
}
#buttonDiv {
  width : 190px;

}
#stext {
  padding : 10px;
  font-size : 20px;
}
#selectbutton {
    float: right;
    position:static;
}

#cancelbutton {
    float: right;
    position:static;
    margin-right : 8px;
}

#otherbutton {
    position: absolute;
    left: 250px;
    top: 100px;
}

Upvotes: 1

Related Questions