Hi

I'm trying to put this 800x60 banner image on my page, I succeeded to center it, but I don't want it to stay from above the menu on the left.

So, lets say that this menu is 100px wide, then I want a minimum distance of 100px between browser border and banner image, but the image being centralized when browser window is becoming bigger.

Thx in advance

Grtz, K?!

never mind, solved it with a fluid design approach.

If you are using div tags, give the margin-left:100px; for your image div tag(div tag that holds your image).

well, I have tried to create a "liquid" banner (fluid design) that gets wider when the window's width increases. So there are typical 3 div's (left, center, right) (and a container div for these three. Deleted and put it back several times trying things).

But I keep getting these weird results.

I'v put a min-width in the left div, but there is this space thats being preserved in it, whether I have set this min width or not...

I'm not good at making this all clear, ask me questions if you need to know certain things.

I would like an example (cross-browser compatible) of the fluid banner I'm talking about.

This is my html

<div id="banner_container">
	<div id="banner_left"></div>
	<div id="banner_center"><img src="img/banner_text.png" /></div>
	<div id="banner_right"></div>
</div>

This is my css (only for the banner part of course):

#banner_container{
	width: 100%;
	height: 60px;
	/*overflow: hidden;*/
}
#banner_left{
	float: left;
	width: 15%;
	/*min-width: 130px;*/
	height: 60px;
	background: url(img/banner_left.png) no-repeat top right;
}
#banner_center{
	float: left;
	width: 70%;
	/*min-width: 100px;*/
	height: 60px;
	background: #000;
}
#banner_right{
	float: left;
	width: 15%;
	/*min-width: 28px;*/
	height: 60px;
	background: url(img/banner_right.png) no-repeat top left;
}

For example, when I put in min-width=100px; for the left div, it resizes pretty good, and everything stays in the same position, the right div just disappears when the browser window gets too small.

When I set it to 150 px, when the browser window gets too small, the right div jumps UNDER the others...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.