Jump to content
  • 0

расположение Div


boooze
 Share

Question

Хочу вот такую структуру сверстать x_d8cb1f2c.jpg

В менюшке к правому краю прилеплена маленькая картиночка и дальше идет горизонтальный список.

Суть проблемы В том что контейнер something ,вместо того что бы прилипнуть к правому краю экрана,прилипает к левой границе контейнера skriptorsomething.Я не знаю,как можно расставить два правых блока skriptorsomething и something так что бы слева от них был блок main во всю высоту экрана ,поэтому решил сделать main позиционированным ,что бы два правых отображались ,так будто бы main и нет вовсе.

Значит вот код HtML:

<div id="shapka"><img src="images/logo.jpg" class="imgshpk"><h1>Cайт о чем то </h1></div>
<div id="menu">
<img src="images/zn.jpg"/>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">олололо</a></li>
<li><a href="">эбаут</a></li>
<li><a href="">6</a></li>
<ul>
</div>
<div id="main"></div>
<div id="skriptorsomething"></div>
<div id="something"></div>
<div id="footer"></div>
</body>

.

Теперь css:

body
{
margin:0px;
}
.imgshpk
{
float:left;
}
#shapka
{
width:100%;
height:100px;
background-image:url(../images/shpkgrdnt.jpg);
background-repeat:repeat-x;
}
#shapka h1
{
margin-top:0px;
padding-top:25px;
text-align:center;
font: normal normal 900 40px arial,sans-serif;
color:#fff36f;
}
#menu
{
width:100%;
height:51px;
background-image:url(../images/menugrdnt.jpg);
background-repeat:repeat-x;
}
#menu img
{
float:left;
margin-left:10px;
}
#menu ul
{
margin-top:0px;
padding-top:1.5em;
font:bold 12px Verdana, sans-serif;
line-height:19px;
float:left;
padding-left:0px;


}
#menu ul li
{
padding:20px;
list-style:none;
margin-top:0px;
display:inline;
line-height:19px;

}
#menu ul li a
{
text-decoration:none;
color:#b1b1b1;
line-height:10px;
line-height:19px;

}
#menu ul li a:hover
{
text-decoration:none;
color:#d9d9d9;
}
#main
{
width:50%;
min-height:50%;
float:left;
border:1px solid black;
position:absolute;
}
#skriptorsomething
{
width:45%;
float:right;
border:1px solid black;
min-height:200px;
}
#something
{
width:45%;
float:right;
border:1px solid black;
min-height:300px;
padding-right:0px;
}

P.S.Спасите!!!

Edited by boooze
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

Сделай обычный двух-колоночный макет, где main будет в левой колонке.

Я просто идиот ;) думать уже совсем перестал ;) а если уж справа прям горит сделать два div надо просто загнать их в один div?который как раз будет второй колонкой

Link to comment
Share on other sites

  • 0

Сделай обычный двух-колоночный макет, где main будет в левой колонке.

Я просто идиот ;) думать уже совсем перестал ;) а если уж справа прям горит сделать два div надо просто загнать их в один div?который как раз будет второй колонкой

Именно! :)

Link to comment
Share on other sites

  • 0

блин...теперь такая фигня ,хочу расположить два дива горизонтально

<div id="main"></div>

<div id="right"></div>

css:

#main
{
width:50%;
height:300px;
border:1px solid black;
float:left;

}
#right
{
width:45%;
height:300px;
border:1px solid black;
float:right;
}

main теперь стоит чуть правее центра ,а right уперается внизу в его левый край ,вместо правой границы экрана.проблема решается если поставить в main position:absolute;

Но почему они просто невстают в ряд ,когда им ставить float'ы ?

+если вставляю в правый блок два дива skript и something

css:

#skript
{
float:right;
width:45%;
height:300px;
border:1px solid red;
}
#something
{
float:right;
width:45%;
height:300px;
border:1px solid green;
}

то они идут в ряд,а если убрать float'ы у них ,то в колонку.Только мне надо ,что бы они прилепали к правому краю.как их выставить в колонку ?<br> не помогает ,контейнер something смещается вниз на 20 пикселей примерно

Edited by boooze
Link to comment
Share on other sites

  • 0

Я не знаю даже. Всё это странно. Давай тестовую страницу делай-ка.

Сделал тестовую страницу все рабит.Попробывал убрать меню с шапкой ,проблема осталась.Думал что проблема в позиционированном левом main'е,ради прикола убрал позиционирование ,элемент остался прилипнут к левому краю как и планировалось O_O .Но справа все та же фигня.И только потом я понял.что когда в дочернем div ставлю ширину в процентах ,то 100% это ширина родительского div ,поэтому было место для второго контейнера,я поставил обоим дочерним div'ам по 100% и они друг под дружкой ;) O_O

Link to comment
Share on other sites

  • 0

Я не знаю даже. Всё это странно. Давай тестовую страницу делай-ка.

Сделал тестовую страницу все рабит.Попробывал убрать меню с шапкой ,проблема осталась.Думал что проблема в позиционированном левом main'е,ради прикола убрал позиционирование ,элемент остался прилипнут к левому краю как и планировалось O_O .Но справа все та же фигня.И только потом я понял.что когда в дочернем div ставлю ширину в процентах ,то 100% это ширина родительского div ,поэтому было место для второго контейнера,я поставил обоим дочерним div'ам по 100% и они друг под дружкой ;) O_O

мда...ну ты даёшь =)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy