I'm still working out best practices of Kentico design.

The way I'm marking up my content, I'm not getting it laid out in Design or Page mode the way it is in Preview or Live mode.

Look at these two screengrabs:

This is what the page should look like. "INFLUENCER MARKET..." is an editable image, and "powered by sysomos" is an editable list of links. The two boxes are inline next to each other:


But this is how it looks in "Page" view (or what I call "Author" view). This is what the authors of the page will see when editing content. The "powered by sysomos" list of links wraps below the image:


It seems to me that this will confuse potential authors.

Is there a way I should/could be laying this out so that my authoring mode more accurately reflects my intent? I assume it has something to do with putting the CSS styling directly into the webparts, but I'm not sure how since, to do so, seems to involve inserting a new div, not applying to an existing div. (eg.: if I want section-1-left and section-1-right to both be inline, I can't simply add a new inner div with display:inline - that won't make the outer divs inline.)

Here is my layout for this page:

<div  class="resources-event">
	<div class="wrap main-inner section-1">
		<div class="section-1-left">
			<cms:CMSWebPartZone ID="zoneSec1left" runat="server" />
		</div>
		<div class="section-1-right">
			<cms:CMSWebPartZone ID="zoneSec1right" runat="server" />
		</div>
	</div>
	...
</div>

And here is my CSS in an external file:

.resources-event{
	width:100%;
}

.resources-event .main-inner{
    margin:	0;
    width: 100%;
}
.resources-event .main-inner.section-1{
    background-color: #f7f7f7;
    background-image: url(/marketwire/media/4.0_Resources/test_event_bg.png);
    background-position: center center;
    text-align: center;
}


.resources-event .main-inner .section-1-left{
    display: inline;
}

.resources-event .main-inner .section-1-right{
    margin-left: 80px;
    display: inline-block;
    vertical-align: top;
    height: 421px;
    position:relative;
    overflow: hidden;
}
.resources-event .main-inner .section-1-right *{
    vertical-align: top;
}