2017-02-04 7 views
0

私はこの問題を抱えていますが、私はこの赤いDIVを右側のdivを通らないようにするにはどうすればいいのか分かりません。右と左のdivメニューの間に置いておきたいのです。このdivを右側の他のもので過去のものにする方法はありますか?

Website Screenshot

HTMLコード:

<body> 
<div class="navigationBar_default"> 
<div class="facetubeLogo_default"></div> 

<div class="facetubeText_container_default"><center><strong class="facetubeText_default"></strong></center></div> 
</div> 
<div class="content_default"> 

<div class="leftMenu_onProfile"> 
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/myProfileButton_onLeftMenu_onProfile.png" /><br>MY PROFILE</button> 
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/optionsButton_onLeftMenu_onProfile.png" /><br>GENERAL</button> 
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/generalButton_onLeftMenu_onProfile.png" /><br>OPTIONS</button> 
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/supportUsButton_onLeftMenu_onProfile.png" /><br>SUPPORT US</button> 
<button class="leftMenu_buttonOnProfile"><img class="leftMenu_buttonImage" src="images/logOutButton_onLeftMenu_onProfile.png" /><br>LOG OUT</button> 
</div> 

<!-- there must be some stuff here, otherwise leftMenu_onProfile will glitch out. --> 

<div class="contentCenter_onProfile"> 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaAAAAAAAAAAAAAAAAAA 
</div> 

<!-- there must be some stuff here, otherwise leftMenu_onProfile will glitch out. --> 

<div class="rightMenu_onProfile">user1<br>user2<br>user3<br>user4<br>user5</div> 
</div> 

CSSコード:

.navigationBar_default { 
    background-color:#202020; 
    width:100%; 
    height:32px; 
    margin-left:-8px; 
    margin-right:-8px; 
    border:0; 
    top:0; 
    position:fixed; 
} 

.facetubeLogo_default { 
    background-image:url("../images/facetube_icon_30x30_png.png"); 
    width:30px; 
    height:30px; 
    margin-top:1px; 
    margin-left:1px; 
    float:left; 
} 

.facetubeText_container_default { 
    margin-top:6px; 
} 

.content_default { 
    width:100%; 
    height:100%; 
    margin-top:32px; 
    margin-left:-8px; 
    margin-right:-8px; 
    margin-bottom:-8px; 
} 

.leftMenu_onProfile { 
    background-color:#0d0d0d; 
    margin-top:0px; 
    margin-left:-8px; 
    width:240px; 
    float:left; 
} 

.leftMenu_buttonOnProfile { 
    background-color:#0d0d0d; 
    border:0; 
    border-bottom:1px solid #ffffff; 
    width:240px; 
    height:48px; 
    color:#ffffff; 
} 

.leftMenu_buttonImage { 
    float:left; 
    margin-top:-2px; 
    margin-right:-6px; 
} 

.contentCenter_onProfile { 
    background-color:red; 
    padding:2px; /* padding is originally removed */ 
    margin:0px; 
    top:0px; 
} 

.rightMenu_onProfile { 
    background-color:#0d0d0d; 
    margin-top:-20px; 
    margin-right:-16px; 
    width:300px; 
    color:#ffffff; 
    float:right; 
} 

は、私はそれがcontent_defaultと幅で何かを持って感じています:100%が、私にはありません知っている。私はすべてを試してみることができませんでした。

:/

+0

divタグの代わりにspanタグを.contentCenter_onProfileに作成しようとしましたか? – NathanielSantley

答えて

0

はこれを試してみてください:

.contentCenter_onProfile { 
background-color:red; 
padding:2px; /* padding is originally removed */ 
margin:0 300px; 
top:0px; 
width: 50%; /* SET THIS */ 
white-space: pre-wrap; 
word-break: break-all; 
} 

幅を設定することで、あなたは右側のdiv要素に重ならないのdivを確保することができます。

float:leftまたはfloat:rightを設定すると、要素が重なります。

+0

それは私が長い間探していたものです。ありがとう弟:D –

関連する問題