/    Sign up×
Community /Pin to ProfileBookmark

Hello, I have designed a three layout page, but when I am adding more words on the right bar, its going down the left bar. Please provide a solution for this.

to post a comment
HTML

9 Comments(s)

Copy linkTweet thisAlerts:
@MephistophelesJul 08.2013 — If you can post some screenshots, please .
Copy linkTweet thisAlerts:
@HarithauthorJul 08.2013 — I can't see how to take a screenshot, can i just post the code?
Copy linkTweet thisAlerts:
@HarithauthorJul 08.2013 — I can't see how to take a screenshot, can i just post the code?
Copy linkTweet thisAlerts:
@MephistophelesJul 08.2013 — Yes, You can .
Copy linkTweet thisAlerts:
@HarithauthorJul 08.2013 — css code:

body

{

background-color:#9FF;

font-size:100%;

margin:0;

padding:0;

}

#header

{

margin-bottom:-20px;

color:#F00;

background-color:#FFC;

}

#link

{

border-top:1px solid;

border-bottom:1px solid;

margin-top:0px;

padding-top:0.5em;

padding-bottom:0.5em;

padding-left:25em;

}

#container

{

width:80%;

margin:0 auto;

background-color:#FFF;

overflow:hidden;

}

#columnleft

{

border-right:1px solid;

margin-top:0;

width:33%;

background-color:#FFF;

float:left;

padding-bottom:1em;

}

#columnmain

{

margin-top:0px;

width:34%;

background-color:#FFF;

float:left;

padding-bottom:1em;

text-align:justify;

}

#columnright

{

border-left:1px solid;

margin-top:0px;

width:33%

background-color:#FFF;

float:left;

padding-bottom:1em;

}
Copy linkTweet thisAlerts:
@Nicholas_DiazJul 08.2013 — 
#columnright
{
border-left:1px solid;
margin-top:0px;
width:33%
background-color:#FFF;
float:left;
padding-bottom:1em;
overflow:none;
}

overflow:none will keep it from flowing out of its boundaries. if you need set a height that way it will stop at the end of the height.

If you want to add a lot more text but you want t box to be a certain size in height then go ahead and add overflow:auto this will keep the box the same size but create a scroll bar on the left and right. you can hide or show these by scroll bars by leaving them alone and by default they will show or hide them by overflow-y:hidden; or overflow-x:hidden;

Also you might create a border all the way around this box and make the color of the borders on the sides you have not declared one to blend in to your back round. this will also help keep the text in its area.
Copy linkTweet thisAlerts:
@noahwilsonJul 09.2013 — You did not define height height there so it will set auto. so if you insert overflow content then it will be flexible. so i think you should be also define height .
Copy linkTweet thisAlerts:
@panly557Jul 12.2013 — I got a layout & it automaticaly comes reversed but i want it normal so what do i do?!
Copy linkTweet thisAlerts:
@HarithauthorJul 12.2013 — Sorry but I dint understand your question.
×

Success!

Help @Harith spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...