Bootstrap3 slider image is got intersect with transparent box - need to move down

Question

I am using bootstrap3 to create my page. I created a slider with images and inside the slider image I have created a <div> with some content inside it with white transparent background. My code as follows:

<div class="header-banner">
    <div class="flexslider header-slider hidden-xs col-sm-3">
        <ul class="slides">
            <li>
                <img src="img/transparent.png" alt="">
                <div data-image="img/content/Slide_Intro_1.png"></div>
                <div class="slider-caption container">
                    <div class="row">
                        <div class="slider-caption container">
                            <div class="col-xs-10 col-sm-5" style="background: rgba(255, 255, 255, 0.4 );">
                                <h3 class="mb-7px" style="margin:0 0 0 20px ;padding:10px 0 0 0;">Lorem ipsum</h3>
                                <p class="mid-dle-font-size mb-5px" style="margin:0 0 0 20px ;padding:10px 0 0 0;">Lorem ipsum Lorem ipsum </p>
                                <a href="#" class="btn btn-red" style="margin:0 0 0 20px ;">Know More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div>
        </div>

But the transparent box I created is intersect on top of the slider image. I need that box to be little more down, so that it should not intersect on top of the slider. Please check the image as follows:

**image**

I am marking it with red. I need to move that box to little more down say it as 40px down. I tried that by giving style="padding:40px 0 0 0"; But the alignment is getting changed and responsiveness also changing. How can I do it without affecting the left and right positions of the transparent box. Any help will be appreciated.

Is there any reason to use the two nested elements class="slider-caption container " ? — Alain BUFERNE
– Alain BUFERNE, Commented Apr 9, 2015 at 12:44
@AlainBUFERNE yes buddy have a logo on above , that I removed for now. The white box should align same lign as of logo. If you can suggest any other way also fine for me!! — Santhucool
– Santhucool, Commented Apr 9, 2015 at 12:46

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You have to use margin for this.

margin-top: 40px;

I'll explain a little bit. See image below.

The CSS Box Model

Explanation of the different parts:

Content - The content of the box, where text and images appear

Padding - Clears an area around the content. The padding is transparent

Border - A border that goes around the padding and content

Margin - Clears an area outside the border. The margin is transparent

Source: W3Schools: CSS Box model

You tried to add padding, what moved only the content down. That's because background-color applies to padding and content. Result would be that box is on same position from top and content moves down by 40px increasing element height.

But margin is outside of HTML element, therefore it moves whole box down. So it won't affect height of element. Since margin is outside of element, background-color dosen't affect it.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 10, 2015 at 6:03

Rene Korss

5,4943 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Santhucool · Accepted Answer · 2015-04-10 04:14:26Z

1

<div class="slider-caption container">
                    <div class="row">
                        <div class="slider-caption container" style="margin-top: 40px;">
                            <div class="col-xs-10 col-sm-5" style="background: rgba(255, 255, 255, 0.4 );">
                                <h3 class="mb-7px" style="margin:0 0 0 20px ;padding:10px 0 0 0;">Lorem ipsum</h3>

Need to include style="margin-top: 40px;" It works. Thank you all

answered Apr 10, 2015 at 4:14

Santhucool

1,7262 gold badges40 silver badges93 bronze badges

Collectives™ on Stack Overflow

Bootstrap3 slider image is got intersect with transparent box - need to move down

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related