Wexo Wexo - 5 months ago 13
CSS Question

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>

San San
Answer

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;
            }