Jump to content

layout problem

birbal

By birbal
in CSS

 Share

Recommended Posts

birbal Devoted Member

birbal

Posted
Posted (edited) 
.wrapper_100                {            width:100%;            min-width:100%;            max-width:100%;        }.wrappers_33                {            width:33%;            min-width:33%;            max-width:33%;        }body,html{    position:relative;    margin:0px;    padding:0px;    left:0px;    top:0px;    height:100%;} #page-base{      margin:0px;    padding:0px;    /* Default attributes */    background-color:skyblue;    color:black;    min-width:800px;    width:100%;         /* It will always make it width as browser width */    height:auto;        /* Height will be determined automatic */    min-height:100%;  /* Optional fixed minimum height */ }.expand        {        height:100px;    }  

<!DOCTYPE html><html><head>    <title>project</title>    <link href='[u]/css/layout.css[/u][attachment=498:Office-Project-Implements of framework and namspaced elements 2012-05-20 03-25-02.png][attachment=498:Office-Project-Implements of framework and namspaced elements 2012-05-20 03-25-02.png]' type='[url=""]text/css[/url]' rel='[url=""]stylesheet[/url]' />    </head><body>    <div id='[url=""]page-base[/url]'><div class='[url=""]wrapper wrapper_100[/url]'>    <div class='[url=""]wrapper wrapper_33 expand[/url]'>    </div>    <div class='[url=""]wrapper wrapper_33 expand[/url]'>    </div>    <div class='[url=""]wrapper wrapper_33 expand[/url]'>    </div></div>    </div></body></html>

here the three div is fitting in the parent div. but it should ommit the space beetween the div. so that exess 1% div be accounted at last. what i am missing?

post-43012-0-81155400-1337464623_thumb.png

Edited by birbal
Link to comment
Share on other sites
birbal Devoted Member

birbal

Posted
  • Author
Posted (edited) 
	.wrapper_100					{				width:100%;				min-width:100%;				max-width:100%;			}	.wrappers_33					{				width:33%;				min-width:33%;				max-width:33%;			}body,html	{		position:relative;		margin:0px;		padding:0px;		left:0px;		top:0px;		height:100%;	}	 	#page-base	{  		margin:0px;		padding:0px;		/* Default attributes */		background-color:skyblue;		color:black;		min-width:800px;		width:100%;		 /* It will always make it width as browser width */		height:auto;		/* Height will be determined automatic */		min-height:100%;  /* Optional fixed minimum height */	 	}	.expand			{			height:100px;		}  	

<!DOCTYPE html>	<html>	<head>		<title>project</title>		<link href='[u]/css/layout.css[/u][attachment=498:Office-Project-Implements of framework and namspaced elements 2012-05-20 03-25-02.png][attachment=498:Office-Project-Implements of framework and namspaced elements 2012-05-20 03-25-02.png]' type='[url=""]text/css[/url]' rel='[url=""]stylesheet[/url]' />		</head>	<body>		<div id='[url=""]page-base[/url]'>	<div class='[url=""]wrapper wrapper_100[/url]'>		<div class='[url=""]wrapper wrapper_33 expand[/url]'>		</div>		<div class='[url=""]wrapper wrapper_33 expand[/url]'>		</div>		<div class='[url=""]wrapper wrapper_33 expand[/url]'>		</div>	</div>		</div>	</body>	</html>

here the three div is fitting in the parent div. but it should ommit the space beetween the div. so that exess 1% div be accounted at last. what i am missing?

Edited by birbal
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

are you using display: inline-block;? the spacing is caused by newline and spacing between elements. If you butt them together, no spacing, no new line, no problems, OR use float instead. 

<div class='wrapper wrapper_100'><div class='wrapper wrappers_33 expand'></div><div class='wrapper wrappers_33 expand'></div><div class='wrapper wrappers_33 expand'></div></div>

or use float: Also is it .wrappers_33 (CSS), OR .wrapper_33 (HTML)

Edited by dsonesuk
Link to comment
Share on other sites
birbal Devoted Member

birbal

Posted
  • Author
Posted
are you using display: inline-block;? the spacing is caused by newline and spacing between elements
yes i am using inline-block. does the spacing is accounted only for inlinr-block?
Also is it .wrappers_33 (CSS), OR .wrapper_33 (HTML)
its wrapper_33. i made a typo here when i tried to edit.
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted
yes i am using inline-block. does the spacing is accounted only for inlinr-block?
if you use inline block and in you page you have 
        <div class='wrapper wrapper_100'>                <div class='wrapper wrapper_33 expand'>                </div>                <div class='wrapper wrapper_33 expand'>                </div>                <div class='wrapper wrapper_33 expand'>                </div>        </div>

any spacing between each element will result in a space appearing the width/height size of current font used, but butting these elements together as

<div class='wrapper wrapper_100'><div class='wrapper wrappers_33 expand'></div><div class='wrapper wrappers_33 expand'></div><div class='wrapper wrappers_33 expand'></div></div>

fixes the problem. You could set font-size within '.wrapper_100' to font-size:0; then reset the font-size within '.wrappers_33' 

        .wrapper_100                                        {                                width:100%;                                min-width:100%;                                max-width:100%;font-size:0;                        }        .wrappers_33                                        {                                width:33%;                                min-width:33%;                                max-width:33%;font-size: 14px;                        }

all spacing become 0 height and width, so you no longer need to butt elements together as you did in the first solution.

Link to comment
Share on other sites
birbal Devoted Member

birbal

Posted
  • Author
Posted

thanks for your help it has been solved. in my situation i cant use font-size i found another work around

<div class='wrapper wrapper_100'>                <div class='wrapper wrapper_33 expand'><!--                --></div>                <div class='wrapper wrapper_33 expand'><!--                --></div>                <div class='wrapper wrapper_33 expand'><!--                --></div>        </div>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...