CODEWITHSUNDEEP
htmlcssborder
Joseph hooper
Joseph hooper

Reputation: 1067

HTML/CSS Border Around Multiple Elements

I'm trying to get a border around my image and paragraphs items but I can't figure out how to do it. I encased them in divs and added a class to them but the background color and border effects do nothing. This is what i'm shooting for: enter image description here

this is what my HTML code looks like for this section:

<div class="pair">
                <a href="GPA_Calc_Screen.png">
                    <img src="GPA_Calc_Screen.png" alt""> <!--Relative img path -->
                </a>

                <p>
                        This is a custom GPA Calculator, and what I like to think is the first real app that I made. Going to Georgia Tech, and college in general, this is a vital asset. Although at GT we don't operate on the plus/minus system, I added a setting in which you can edit that if you want.
                </p>
        </div>

and here is my CSS: 

.pair div {
    display: block;
    /*padding: 5px;
    clear: right;
    width: 100%;
    border-radius: 5px;
    border-width: 3px;
    border-color: red;*/
    background: red;
}

Upvotes: 1

Views: 13174

Answers (4)

mugdha
mugdha

Reputation: 90

you don't need to add div in front of .pair when you are doing class without id based you just keep

.pair  {
      border: 3px rgb(86, 10, 10) solid;
      padding: 9px;
      display: block;        
 }   

 <div class="pair">
   <a href="GPA_Calc_Screen.png">
     <img src="sourceofimage.png" alt""> <!--Relative img path -->
   </a>
   <p>
     your text
   </p>
 </div>

for bottom div also you need to add this "pair" class.

Upvotes: 2

user4039781
user4039781

Reputation:

Fixed the problem ,just go to the jsfiddle hereClick Here

div {
    border: 3px solid #8AC007;
}

.img1 {
    float: left;
}

.clearfix {
    overflow: auto;
}
<body>
	<div class="clearfix">
	<img class="img2" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTUHgZRyJPa3nt3V4hgxAN0K2iFn1MaoYluUIwswewquau2nkdRaA" width="100" height="300">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo culpa, maiores veritatis minima sequi earum. Ad perspiciatis molestias, illum saepe nihil quo nam dignissimos ducimus similique consequatur veniam facilis iure! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ullam perferendis esse deserunt vel ea alias, officia earum, natus, aspernatur porro. Maiores assumenda distinctio accusantium laudantium voluptate explicabo, aliquid sint.
</div>
</body>
</html>

Upvotes: 0

Paweł Smołka
Paweł Smołka

Reputation: 638

Try as in this I have made for you fiddle

If you want use '.pair div {}' you need to place that div inside of div with .pair class

.pair{
display: block;
padding: 5px;
clear: right;
width: 100%;
border-radius: 5px;
border: 5px solid #ff0000;
background: orange;
}

Upvotes: 0

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

You have to add border in .pair class

.pair div
{
    display: block;
    padding: 5px;
    clear: right;
    width: 100%;  
}
.pair
{
    border:3px solid red;
}

Upvotes: 0

Related Questions