homepage Welcome to WebmasterWorld Guest from 54.204.79.235
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
2 blocks responsive design outlining
timmy01




msg:4601482
 9:06 am on Aug 13, 2013 (gmt 0)

On top of the page i have a menu block including a logo lined out on the right.

Underneath this block i have the content block.
If i resize the browser window, the content block doesn't stick to the left side of the window but moves to the right next to the menu-block out of sight.

What is the way to go here?

a small piece of it (the basic) i copy/pasted here:

<style>
#logo {
max-width: 50%;
float:right;
height:45px;
}
#menu_block {
display: block;
border:1px solid green;
}

#container {
display: block;
position: relative;
border: 1px solid #666;
padding: 5px;
margin-bottom: 20px;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
</style>

<section id="options" class="clearfix">
<div id="menu_block">-menu-
<div id="logo"> -logo-
</div>
</div>
</secion>
<div id="container" class="clearfix">
-content-
</div>

 

DrDoc




msg:4601538
 3:38 pm on Aug 13, 2013 (gmt 0)

</section>
Is that in your actual code, or just missing when reproducing it here?
lucy24




msg:4601626
 9:14 pm on Aug 13, 2013 (gmt 0)

Also: be very, very careful when using floats next to anything with a display set to something other than the default. Make sure there can never be an unwanted collision. You will probably need to switch off the float once you're below a certain size.

drhowarddrfine




msg:4601665
 11:52 pm on Aug 13, 2013 (gmt 0)

I don't see the problem. Which browser?

timmy01




msg:4601742
 7:08 am on Aug 14, 2013 (gmt 0)

@drdoc,
I did check in my source if I had a typo in there. But it's just the example put here.

@lucy, i'll keep that in mind. I even read somewhere that float was completely unnecessary. I forgot what the alternative was tho.

@drhoward, (a lot of doctor here :))
it seem to be the #options which i had set to a fixed dimension.
after that the problem was solved

#options {
padding-bottom: 1.0em;
min-height: 80px;
max-width:85%;
}

drhowarddrfine




msg:4601809
 11:31 am on Aug 14, 2013 (gmt 0)

I even read somewhere that float was completely unnecessary.
You mean ever? It must have been a xkcd comic.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved