CODEWITHSUNDEEP
css
Lesharc
Lesharc

Reputation: 13

Setting up div position

I have a little problem as a css newbie. I'm creating theme for Getsimple Cms and there is one div I can't place where I want to.

enter image description here

I tried everything I know but only one thing that worked was deleting "menu" div, which actually cause all this problems.

Here's css code for both 'menu' and 'kontakt' div.

#kontakt {
float: right;
margin-top: 5px;
background-color: #c43131;
width: 236px;}

and

#menu {
float: left;
margin-top: 5px;
background-color: #c43131;
width: 759px;}

#menu ul {
float:left;
width:759px;
padding:0;
margin:0;
list-style-type:none;}

#menu a {
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:#7A378B;
padding:0.2em 0.6em;
border-right:1px solid white;}

#menu a:hover {background-color:#ff9000;}
#menu li {display:inline;}

html here:

<div id="content">

<div id="menu">

    <ul>
        <li><a href="#">Link one</a></li>
        <li><a href="#">Link two</a></li>
        <li><a href="#">Link three</a></li>
        <li><a href="#">Link four</a></li>
    </ul>

</div>

<div id="con">
    <div class="con-title"><h2><?php get_page_title(); ?></h2></div>
    <div class="con-text"><?php get_page_content(); ?></div>
</div>


<div id="kontakt">
    <img alt="Kontakt" src="<?php get_theme_url();?>/images/kontakt.png">
    Sed ut perspiciatis unde 
            omnis iste natus error sit 
            voluptatem accusantium doloremque 
            laudantium, totam rem aperiam, 
            eaque ipsa quae ab illo inventore 
            veritatis et quasi architecto beatae 
            vitae dicta sunt explicabo. 
</div>
   </div>

Upvotes: 1

Views: 615

Answers (3)

nCore
nCore

Reputation: 2087

Also found this float div. Gives you the idea how float works and also be aware that paddings/margins affects the size of the div.

<div id="container">

<div id="menu"></div>

<div id="book">

    <div id="column1" class="column_n">
        <ul>
            <li>Home</li>
        </ul>
    </div>

    <div id="column2" class="column_n"></div>

</div>


body {
margin: 0 auto;
padding: 0;
border: 0;
font-family: Verdana;
font-size: 20px;
}

.column_n {
    background: red;
    border: 1px solid black;
    width: 40%;
    height: 100px;
    margin: 20px;
    float: left;
}

http://jsfiddle.net/e9a7w/1/

Upvotes: 0

Nick
Nick

Reputation: 2551

Try this:)

http://jsfiddle.net/736QQ/1/

I've just wrapped your content in Divs and floated them.

You should be able to work from this :)

<div id="header"></div>

<div id="left">
    <div id="menu"></div>
    <div id="con"></div>
</div>

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

Upvotes: 1

Cameron
Cameron

Reputation: 1524

In a nutshell, the div #menu is "taking up space" in that section of the page. This in turn will push down the following divs #con and #kontakt.

Upvotes: 0

Related Questions