1 reply [Last post]
fdsafadsfasdfre3r4r
fdsafadsfasdfre3r4r's picture
Offline
newbie
Last seen: 5 years 22 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>
    </div>
 
    <div id="body">
 
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
 
    </div>    

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>
 
<div style="float:left;width:186px;">
...
....
...
</div>

css I think is contributing to the problem:

html {
    background-color: #e2e2e2;
    margin: 0;
    padding: 0;   
    white-space:nowrap;
 
}

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
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 17 hours 20 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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.

cheers.

gary

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