1 reply [Last post]
fdsafadsfasdfre3r4r's picture
Last seen: 8 years 30 weeks ago
Timezone: GMT+2
Joined: 2013-10-07
Posts: 2
Points: 4

I have following html in a asp.net MVC project.

In my layout page:

<div style="display:inline-block; vertical-align: top; width:225px; margin-left:10px;">
        <div id="datepicker"></div>
        <div id="typ" style="margin-right:10px;">
            @Html.Action("_GetSomeContent", "Controller")
    <div id="body">
        <section class="content-wrapper main-content clear-fix">

Inside the RenderBody i have a page containing a loop that outputs a number of divs with a bit of content:

<div style="float:left;width:186px;">
<div style="float:left;width:186px;">

css I think is contributing to the problem:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;   

For some reason when the page is full horizontally the div is continuing on the same line so that scrolling horizontally is needed, not placed below as I what them to.

I'm guessing it's because of the white-space:nowrap; in html. But when I remove white-space:nowrap the whole <div id="body"> is put on below the first div in the layout page and I want this two divs to always be side by side.

How can I get the divs inside

to continue on a new row when the current row (screen horizontally) is full?

gary.turner's picture
Last seen: 1 year 49 weeks ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It's inherited

In the side by side divs, add {white-space: normal;} to override the nowrap within the divs that is applied to the divs themselves.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.