CODEWITHSUNDEEP
htmlcss
Wexo
Wexo

Reputation: 175

CSS inline block not making a newline

Hi am trying make this web page but am facing this problem am using inline block but its not making a new line it just keep on going in a straight line i need it to make a newline once it reaches MainPage padding limit how can i do this i thought inline automatically makes a newline

Thank you. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>

        #MainPage {
            padding-left: 230px;
            padding-right: 230px;
        }

        body > #body-container {
            height: auto;
            min-height: 100%;
        }

        .pageData {
            display: table;
            table-layout: fixed;
            width: 100%;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .PageInner {
            display: table-row;
        }

        .PageCard {
            margin: 0 0 10px;
            border: 0;
            background: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .gridItem {
            display: inline-block;
            margin-right: 10px;
            vertical-align: top;
            width: 196px;
            word-wrap: break-word;
        }

        #Pagebox {
            border-bottom: 1px solid #e2e2e2;
            padding-left: 18px;
            padding-right: 18px;
        }

        .UL-Slider {
            width: 100%;
            overflow: visible;
            position: relative;
            left: 0;
            white-space: nowrap;
            font-size: 0;
            vertical-align: top;
            -moz-transition: left .3s ease-in-out;
            -webkit-transition: left .3s ease-in-out;
            transition: left .3s ease-in-out;
        }

        .MovieItem {

            display: inline-block;
            margin-right: 10px;
            vertical-align: top;
            width: 196px;
            word-wrap: break-word;
        }

        .Video-CFix {
            font-size: 11px;
            color: #767676;
            position: relative;
        }

        .LockUp-Thumbnail {
            margin-bottom: 4px;
        }

        .VideoThumb {
            font-size: 0;
        }

        .VideoTitle {
            margin-right: 20px;
            font-size: 13px;
            margin-bottom: 1px;
            max-width: 196px;
        }


    </style>

</head>
<body>

<div id="body-container">
    <div id="MainPage">

        <div class="pageData">
            <div class="PageInner">

                <div class="PageCard">
                    <div class="gridItem">

                        <div id="Pagebox">
                            <ul class="UL-Slider">

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">

                                    <div class="Video-CFix">

                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>

                                    </div>
                                </li>

                                <li class="MovieItem">
                                    <div class="Video-CFix">
                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>
                                    </div>
                                </li>

                                <li class="MovieItem">
                                    <div class="Video-CFix">
                                        <div class="LockUp-Thumbnail">
                                            <div class="VideoThumb">
                                                <img src="http://www.amusingtime.com/images/043/mr-bean-funny-face-expression-image-for-facebook.jpg"
                                                     width="196" alt="" height="110">
                                            </div>
                                        </div>

                                        <div class="lockup-title">
                                            <span class="VideoTitle">
                                                <a href="#">Movie</a>
                                            </span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Upvotes: 0

Views: 304

Answers (1)

San
San

Reputation: 279

I have modified your css, you have to remove whitespace: nowrap from .UL-Slider and remove width from .gridItem. Also reduce padding from #MainPage 

#MainPage {
    padding-left: 100px;
    padding-right: 100px;
}

body > #body-container {
    height: auto;
    min-height: 100%;
}

.pageData {
    display: table;
    table-layout: fixed;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.PageInner {
    display: table-row;
}

.PageCard {
    margin: 0 0 10px;
    border: 0;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.gridItem {
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
    word-wrap: break-word;
}

#Pagebox {
    border-bottom: 1px solid #e2e2e2;
    padding-left: 18px;
    padding-right: 18px;
}

.UL-Slider {
    width: 100%;
    overflow: visible;
    position: relative;
    left: 0;
    white-space: normal;
    font-size: 0;
    vertical-align: top;
    -moz-transition: left .3s ease-in-out;
    -webkit-transition: left .3s ease-in-out;
    transition: left .3s ease-in-out;
}

.MovieItem {

    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
    width: 196px;
    word-wrap: break-word;
}

.Video-CFix {
    font-size: 11px;
    color: #767676;
    position: relative;
}

.LockUp-Thumbnail {
    margin-bottom: 4px;
}

.VideoThumb {
    font-size: 0;
}

.VideoTitle {
    margin-right: 20px;
    font-size: 13px;
    margin-bottom: 1px;
    max-width: 196px;
}

Upvotes: 1

Related Questions