How to align an img and a carousel next to each other, with max-width of 1000px?


Tags: html,css

Problem :

I am a beginner and I've ran into an obstacle while trying to align the img (#logo) and the carousel (#my-slider) - both located in #img-header.

Under them there is a navigation bar and under that some text. The site is supposed to hava a max-width of 1000px (the width of the img is 350px and the width of carousel is 630px, so supposably they're both under 1000px), however when trying to align them, carousel jumps under the logo. If I try to align just the carousel with the navbar and text, float:left works (if I change the max-width to 1060) however, float:right does not work at all - it moves to the right, no matter how i change the max-width. All 3, navbar, text and img-header are supposed to be equally wide. The img and carousel "agree" to be in the same line only if I set the max-width to 1880, which also makes the stick to the left and not being centered. I also tried setting the max-width to 1000 and float the logo to left and carousel to right but it also doesn't work - neither does it work if I float both to the same side (for example, both float:left;.

This is how the website is supposed to look like- with this in the center.

Demo of the website

HTML:

<div id="img-header">
    <img id="logo" src="logo/logo3.png" style="width:350px;height:240px"> 
    <div class="container">
        <div class"row">
            <div class="col-sm-12">
                <div id="my-slider" class="carousel slide" data-ride="carousel" style="width:630px;height:240px">

                    <!-- indicators, small dots -->
                    <ol class="carousel-indicators">
                        <li data-target="#my-slider" data-slide-to="0" class="active"></li>
                        <li data-target="#my-slider" data-slide-to="1"></li>
                        <li data-target="#my-slider" data-slide-to="2"></li>
                    </ol>

                    <!-- wrapper for slides -->
                    <div class="carousel-inner" role="listenbox">
                        <div class="item active">  
                            <img src="food/food1.jpg" alt="food 1">
                        </div>
                        <div class="item">  
                            <img src="food/food2.jpg" alt="food 2">
                        </div>
                        <div class="item">  
                            <img src="food/food3.jpg" alt="food 3">
                        </div>
                    </div>

                    <!--navigations/ next and prev buttons --> 
                    <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <!--<span class="sr-only">Previous</span>-->
                    </a>

                    <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <!--<span class="sr-only">Previous</span>-->
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

#img-header {
max-width: 1060px ;
margin-left: auto ;
margin-right: auto ;   
}   


#logo {
float: left;
} 
 #my-slider {
float: left;
}
 #navbar {
max-width: 1000px ;
margin-left: auto ;
margin-right: auto ;
}
 ul {
list-style-type: none;
overflow: hidden;
background-color: #125ea3;
}
li {
float: right ;  
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #3594ff;
}
.active {
background-color: #3594ff;
}
.text {
max-width: 1000px ;
margin-left: auto ;
margin-right: auto ;
}
h1 {
text-align="center"
}
p {
text-align="center"
}

I know I am just a begginer so I have probably made quite a few mistakes, please forgive me in advance.

Thanks for all the help and advice in advance!



Solution :

Documentation of bootstrap has everything. You just need to look for it. http://getbootstrap.com/css"

And I think your problem can be solved by

<div class="row">
  <div class="col-md-4">
     <!--Logo Comes here-->
  </div>
  <div class="col-md-8">
     <!--Carousal Comes here-->
  </div>
</div>

    CSS Howto..

    How to Detect css style by iPhone/iPad

    How does jQuery affect CSS structure

    JQuery JQGrid - how to CSS right/left align without touching the grid lines?

    How to identify unused css definitions [closed]

    How to use pseudo-class :target within an image map

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    How to call image on css?

    how to div.width css property using js or jquery?

    How to extend a div's width beyond its wrapper?

    css how to remove the empty space at the left

    How to use css in one page only?

    Show unordered list's bullet points when display:table

    How to restore CSS style to its super class

    How to make this css readable?

    how to Design a vista like button using CSS

    How do I create a region/zone map for the web? [closed]

    How to fade in a specific CSS property

    How to do something like #Card%{ } in CSS

    How can I get a Select elements Options to “right-width” but leave the width of the Select itself unchanged?

    Images not showing up in correct spot [closed]

    how to set zoom level using css

    How to make this character to be placed at the right side of its container?

    How to add a css class programmatically to a piece of code?

    How to select the parent's parent in CSS?

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    how to dynamically change css class for html form elements based on other css class

    How to make navigation bar scroll with the page?

    How can I compress / gzip my mimified .js and .css files before publishing to AWS S3?

    html/css - using sprite with tag - how to remove the outline in Chrome?

    How to make a navbar stay in one line?