What's new

Web Inline content

  • Thread starter Zoid in Code
  • Start date
  • Views 293
Z

Zoid in Code

Enthusiast
Messages
447
Reaction score
49
Points
85
Sin$
0
Ok so I have 3 containers that contain a header and a small paragraph. I would like the 3 "containers" inline. How would I do so?

HTML:
HTML:
<div class="container">
<div class="content-main">
<br>
<h2> Big news at Unity Code ... </h2>
<p>Welcome to our new homepage. We have also updated our site
with new and improved code so please take a tour around our site
to see what we have been doing.<br><br>
  An example of our updated code can be found on our <a href="#"> example</a> page.</p>
</div>
<br>
<div class="content-second">
<br>
<h2> New projects ... </h2>
<p>We have many new projects in development. More information can be found
on our <a href="#">projects</a> page<a href="#"></a>
<br><br>
  If you wish to help us on any of our projects please visit our<a href="#"> developer</a>
  page for more information.</p>
</div>
<br>
<div class="content-third">
  <br>
  <h2> New products coming soon ... </h2>
  <p>New products are coming soon. Our new products are T-shrits, wristbands and custom posters</p>
</div>
</div>
CSS:
CSS:
.content-main {
width: 350px;
height: 300px;
background-color: #DAD8D8;
border-radius: 8px;
font-family: ubuntu;
padding-left: 5px;
font-style: none;
text-decoration: none;
list-style-type: none;

}

.content-main a{
text-decoration: none;
list-style-type: none;
}
.content-second {
width: 500px;
height: 190px;
background-color: #DAD8D8;
border-radius: 8px;
font-family: ubuntu;
padding-left: 5px;
font-style: none;
text-decoration: none;
list-style-type: none;
}
.content-second a{
text-decoration: none;
list-style-type: none;
}

.content-third{
width: 500px;
height: 190px;
background-color: #DAD8D8;
border-radius: 8px;
font-family: ubuntu;
padding-left: 5px;
font-style: none;
text-decoration: none;
list-style-type: none;
}
.content-third a {
text-decoration: none;
list-style-type: none;
}
 
Last edited by a moderator:
N

NukeZilla

Enthusiast
Messages
144
Reaction score
40
Points
105
Sin$
0
Do you want them all on the same line? Can you please explain exactly what you are wanting as the title is confusing.
 
Z

Zoid in Code

Enthusiast
Messages
447
Reaction score
49
Points
85
Sin$
0
Do you want them all on the same line? Can you please explain exactly what you are wanting as the title is confusing.
Yeah In the same line but in their own "box" if that makes sense. Like how if you did col-sm-4 using bootstrap
 
N

NukeZilla

Enthusiast
Messages
144
Reaction score
40
Points
105
Sin$
0
Add a css for the main:
CSS:
.container {
display:block;
width 100%
}

then on add class to each div called "col-sm-4" and use the following CSS;
CSS:
.col-sm-4 {
display:inline-block;
}
 
Z

Zoid in Code

Enthusiast
Messages
447
Reaction score
49
Points
85
Sin$
0
Add a css for the main:
CSS:
.container {
display:block;
width 100%
}

then on add class to each div called "col-sm-4" and use the following CSS;
CSS:
.col-sm-4 {
display:inline-block;
}
Ok Ive done
CSS:
.container{
display: block;
width: 100%;
}
.content-main {
width: 300px;
height: 185px;
background-color: #DAD8D8;
border-radius: 8px;
font-family: ubuntu;
padding-left: 5px;
font-style: none;
text-decoration: none;
list-style-type: none;
display: inline-block;
margin-top: 125px;
}

.content-main a{
text-decoration: none;
list-style-type: none;
}
.content-second {
width: 300px;
height: 185px;
background-color: #DAD8D8;
border-radius: 8px;
font-family: ubuntu;
padding-left: 5px;
font-style: none;
text-decoration: none;
list-style-type: none;
display: inline-block;
margin-top: 125px;
}
.content-second a{
text-decoration: none;
list-style-type: none;
}

.content-third{
width: 300px;
height: 185px;
background-color: #DAD8D8;
border-radius: 8px;
font-family: ubuntu;
padding-left: 5px;
font-style: none;
text-decoration: none;
list-style-type: none;
display: inline-block;

}
.content-third a {
text-decoration: none;
list-style-type: none;
}

But the third/last box is lower than the rest on my page. I can't find a fix, any help?
 
N

NukeZilla

Enthusiast
Messages
144
Reaction score
40
Points
105
Sin$
0
EDIT:

CSS:
.container{
display: flex;
width: 100%;
max-width:1000px
}
.col-3{
width: 100%;
max-width:325px;
background-color: #DAD8D8;
border-radius: 8px;
font-family: ubuntu;
padding-left: 5px;
font-style: none;
text-decoration: none;
list-style-type: none;
display: inline-block;
margin-right:  10px
}
.col-3:last-child {
margin-right:0px;
}

.col-3  a {
text-decoration: none;
list-style-type: none;
}
@media screen (min-width:540px)
{
.col-3 {
display:block;
width:100;
}
}

HTML:
<div class="container">
<div class="col-3">
<h2> Big news at Unity Code ... </h2>
<p>Welcome to our new homepage. We have also updated our site
with new and improved code so please take a tour around our site
to see what we have been doing.<br><br>
  An example of our updated code can be found on our <a href="#"> example</a> page.</p>
</div>
<div class="col-3">
<h2> New projects ... </h2>
<p>We have many new projects in development. More information can be found
on our <a href="#">projects</a> page<a href="#"></a>
<br><br>
  If you wish to help us on any of our projects please visit our<a href="#"> developer</a>
  page for more information.</p>
</div>
<div class="col-3">
  <h2> New products coming soon ... </h2>
  <p>New products are coming soon. Our new products are T-shrits, wristbands and custom posters</p>
</div>
</div>

Live demo: http://codepen.io/anon/pen/YXreJX

You do not need to use <br> tags when using paragraphs. To enable all div's to obtain the same height you need to change .container to flex like in the example
 
Last edited:
Top Bottom
Login
Register