I can't get my links display as inline in HTML - html

Question

i'm trying to write a div box with headings and links below to it, but somehow i can't get the links to display next to eachother, i've tried using display:inline, but it did no effect, i've also tried float, position etc, but just can't get what i want without messing up.
my code is here: http://jsfiddle.net/dfc8gceg/2/
<div style="background:#E1ED9D; width: 25%;height:250px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<a href="">
<h4 style="background:blue; width:50%; color:#0e8dbc; text-align:center; margin:10% 0 0 0; ">Link1</h4>
</a>
<a href="">
<h4 style="background:orange; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link2</h4>
</a>
<a href="">
<h4 style="background:purple; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link3</h4>
</a>
<a href="">
<h4 style="background:red; width:50%; color:#0e8dbc; text-align:center; margin:3% 0 0 0;">Link4</h4>
</a>
</div>
Sorry for the repetition of code, it's because i can't use CSS or put code into head section, only body section of html due to my task requirement,
i would appreciate alot if someone can show me the answer without too much change on my code

Answer 1

I got rid of the h4 tags and used divs instead
http://jsfiddle.net/dfc8gceg/8/
<div style="background:#E1ED9D; width: 50%;height:150px; position: relative; float: left;">
<h3 style="text-align:center; margin:0;">I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<a href="">
<div id="div1">hej</div>
</a>
<a href="">
<div id="div2">hej</div>
</a>
<a href="">
<div id="div3">hej</div>
</a>
<a href="">
<div id="div4">hej</div>
</a>
</div>
I also added some css to the jsfiddle
you should look more into how to use css and html
Hope this works out for you!

Answer 2

I made a JSFiddle, is this what you were aiming for?
http://jsfiddle.net/dfc8gceg/7/
Here is the HTML
<div id="container">
<h3>I want the links below display as first column link1 and line2, then next column link3 and link4, 50% width each</h3>
<h4>Link1</h4>
<h4>Link3</h4>
<h4>Link2</h4>
<h4>Link4</h4>
</div>
With accompanying CSS
#container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
h3 {
text-align: center;
margin:0;
}
a {
display: inline-block;
}
.link {
width: 50%;
color: #0e8dbc;
text-align: center;
display: inline-block;
float: left;
}
#link1 {
background: blue;
margin: 10% 0 0 0;
}
#link2 {
background: orange;
margin: 3% 0 0 0;
}
#link3 {
background: purple;
margin: 10% 0 0 0;
}
#link4 {
background: red;
margin: 3% 0 0 0;
}
I think I achieved what you were looking for.
Hope this helps! :D
PS: I'm a noob at Stack Overflow, did I format this correctly? It wanted the code in the answer so...
EDIT: I kept the H4 elements for you, but feel free to change them (I didn't want to change any of your code, I kept it all just made it neater)

Answer 3

A preferred method would be instead to use an unordered list (<ul><li></li></ul>), and then add css to the list, display: inline; to remove the default block level display. Alternatively, you can use display: block; float: left;, which you would need in order to give a width to the li.
Moreover, you should not be using inline CSS, but rather a stylesheet.
Like this:
CSS:
.container {
background: #E1ED9D;
width: 25%;
height: 250px;
position: relative;
float: left;
}
.container h3 {
text-align:center;
margin:0;
font-size: 14px;
font-family: arial;
font-weight: normal;
}
.list {
width: 100%;
padding: 15px 0 0 0;
margin: 0;
}
.list li {
style-type: none;
display: block;
float: left;
width: 50%;
margin: 15px 0 0 0;
padding: 10px 0;
text-align:center;
}
.list li a {
color:#0e8dbc;
}
#first-link {
background:blue;
}
#second-link {
background:orange;
}
#third-link {
background:purple;
}
#fourth-link {
background:red;
}
HTML
<div class="container">
<h3>I want the links below display as first row link1 and line2, then next row link3 and link4, 50% width each</h3>
<ul class="list">
<li id="first-link">Link1</li>
<li id="second-link">Link2</li>
</ul>
<ul class="list">
<li id="third-link">Link3</li>
<li id="fourth-link">Link4</li>
</ul>
</div>
Also, as above, you don't need the H4s because that is poor coding to put into a menu (what you have is essentially a menu). H4 is better used as a header tag. By instead defining css classes to the LI elements, there is no need for a specific html tag like h4.
EDIT: I improved the CSS code from what I had before. I changed the ID elements to classes (class is used if there will be more elements using the same class), and moved the link classes into the LI. I also changed the li classes to IDs because ID is to be used when it appears only one time on the page. Given the specificity of the IDs, these will likely not be used again. If they are, you should change it back to a class.
jsfiddle: http://jsfiddle.net/Lxyjjfx2/1/